固定的div背景与浏览器滚动条重叠问题

Question

固定的div背景与浏览器滚动条重叠问题

csshtmlscrollbaroverlapfixed

9

我从未见过的非常奇怪的行为。

我有一个固定位置的div，它具有透明的png背景图像。z-index设置为-1，这样内容就可以在滚动条上滚动并覆盖固定图像。

我将其定位在底部和右侧为0px，但是图像会重叠在滚动条上（至少在FF和Safari上如此）。

以下是链接：

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问题吗？

- Adam Casey

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sarcastyx · Accepted Answer

这是一个奇怪的问题。但我发现滚动条并不是来自浏览器，而是来自父级 div，该 div 具有 overflow: auto。

这是我解决它的方法。更改 div id="rightpanel" 的样式以删除 overflow: auto;。

然后按以下方式更新 #rightcontent 样式：

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

希望这样做可以解决所有浏览器的问题。此外，我还发现浏览器抱怨找不到Cufon.js文件。您可能也想查一下。