固定div背景重叠浏览器滚动条 [英] Fixed div background overlapping browser scrollbars

问题描述

我以前没有见过的很奇怪的行为。

我有一个固定的位置div，有一个透明的png背景图片。 z-index设置为-1，以便内容可以滚动到固定的图像与滚动条。

我有它的底部和右边定位在0px，但

这是链接：

http://adamjcas.www59.a2hosting.com/pg/show/id/4

CSS：

  #plants / * for the cut paper plants in the background * / 
 {
 background：transparent url（../ background_images / plants.png）no-repeat; 
 bottom：0px; 
 right：0px; 
 z-index：-1; 
 position：fixed; 
 height：691px; 
 width：475px; 
} 
  

我使用的一个黑客是使用
right：16px;

这工作正常，因为总是（可能）一个右滚动条。但底部的滚动只是有时有。这是一个简单的CSS问题吗？

解决方案

这是一个奇怪的问题。但我想出，滚动条不是从浏览器，而是从父div的 overflow：auto 。

这是我如何修正。更改 div id =rightpanel的样式以删除 overflow：auto; 。
$ b

然后更新 #rightcontent 样式，如下所示：

  #rightcontent {
 left：445px; 
 padding-top：127px; 
 position：relative; 
 width：650px; 
} 
  

希望这可以解决所有浏览器的问题。除此之外，我还发现浏览器抱怨没有找到Cufon.js。你也可以考虑一下。

Very strange behavior that I haven't seen before.

I have a fixed position div that has a transparent png background image. The z-index is set to -1 so that content can scroll over the fixed image with the scrollbars.

I have it positioned with the bottom and right at 0px, but the image overlaps the scrollbars (on FF and Safari, anyway.)

Here's the link:

http://adamjcas.www59.a2hosting.com/pg/show/id/4

CSS:

#plants /*for the cut paper plants in the background*/
{
    background: transparent url(../background_images/plants.png) no-repeat;                                         
    bottom:0px;
    right:0px;
    z-index: -1;
    position:fixed;
    height:691px;
    width:475px;        
}   

One hack I used was to use right: 16px;

Which worked fine, as there is always (probably) a right scrollbar. But the bottom scroll is only sometimes there. Is this a simple CSS issue?

解决方案

That was a strange issue. But I figured out that the scroll bar was not from the browser but instead from the parent div which had overflow: auto.

This is how I fixed that. Change the style for div id="rightpanel" to remove the overflow: auto;.

Then update the #rightcontent styles as follows:

#rightcontent {
    left: 445px;
    padding-top: 127px;
    position: relative;
    width: 650px;
}

Hopefully that should fix the issue for all browsers. Besides that I also found the browsers complaining about not finding Cufon.js. You might want to look into that as well.

这篇关于固定div背景重叠浏览器滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！