修复了 div 背景重叠浏览器滚动条的问题

发布于 2024-10-14 15:40:02 字数 737 浏览 8 评论 0原文

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

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

我使用的一种技巧是使用右：16 像素；

这工作得很好，因为总是（可能）有一个正确的滚动条。但底部卷轴只是有时存在。这是一个简单的 CSS 问题吗？

原文

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

冷了相思 2024-10-21 15:40:02

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

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

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

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

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

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.

回复收藏 0 原文

~没有更多了~