修复div背景重叠浏览器滚动条

时间:2011-01-27 04:28:23

标签: css html scrollbar overlap fixed

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

我有一个固定的位置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;        
}   

我使用的一个黑客是使用     右:16px;

哪个工作正常,因为总有(可能)右滚动条。但有时只有底部卷轴。这是一个简单的CSS问题吗?

1 个答案:

答案 0 :(得分:5)

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

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

然后更新#rightcontent样式,如下所示:

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

希望这应该可以解决所有浏览器的问题。除此之外,我还发现浏览器抱怨没有找到Cufon.js。您可能也想查看它。