CSS 滚动页面时将可滚动内容隐藏在透明的固定位置 div 后面？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6529421/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hide scrollable content behind transparent fixed position divs when scrolling the page?
提问by mtlca401
I have a div called header that is set up with a fixed position. The problem is when I scroll the page the content of the page shows up behind the header (the header is transparent).
我有一个名为 header 的 div，它设置了一个固定位置。问题是当我滚动页面时，页面内容显示在标题后面（标题是透明的）。
I know a lot about css, but cannot seem to figure this one out. I have tried setting overflow to hidden, but I knew it wouldn't work (and it didn't).
我对 css 了解很多，但似乎无法弄清楚这一点。我曾尝试将溢出设置为隐藏，但我知道它不起作用（并且它没有）。
This is very hard to explain, so I did the best I could.
这很难解释，所以我尽力了。
html:
html：
<div id="header">
<div id="topmenu">Home | Find Feeds | Subscriptions</div>
</div>
<div id="container">
<div id="content">
testing
</div>
</div>
css:
css：
#header {
margin:0 auto;
position: fixed;
width:100%;
z-index:1000;
}
#topmenu {
background-color:#0000FF;
height:24px;
filter: alpha(opacity=50);
opacity: 0.5;
}
#leftlinks {
padding: 4px;
padding-left: 10px;
float: left;
}
#rightlinks {
padding: 4px;
padding-right: 10px;
float: right;
}
#containerfixedtop {
width: 100%;
height: 20px;
}
#contentfixedtop {
margin: 0 auto;
background-color: #DAA520;
width: 960px;
height:20px;
}
#container {
position: relative;
top: 68px;
width: 100%;
height: 2000px;
overflow: auto;
}
#content {
margin: 0 auto;
background-color: #DAA520;
width: 960px;
height: 2000px;
}
Here's a screenshot of the problem:
这是问题的屏幕截图：
回答by Martin
Just coming to this late, but in case anyone else runs across this in the future, here's your fix.
来得这么晚，但如果将来有人遇到这个问题，这里是您的解决方案。
Your CSS Code:
你的 CSS 代码：
.wrapper {
width:100%;
position:fixed;
z-index:10;
background:inherit;
}
.bottom-wrapper {
width:100%;
padding-top:92px;
z-index:5;
overflow:auto;
}
Your HTML:
你的 HTML：
<div class="wrapper">
...your header here...
</div>
<div class="bottom-wrapper">
...your main content here...
</div>
This will provide you with a header that cleanly matches your site, and floats at the top. The main content will scroll free of the header, and disappear when it passes the header. Your .bottom-wrapper padding-top should be the height of your header wrapper's content.
这将为您提供一个与您的网站完全匹配的标题，并浮动在顶部。主要内容将在标题之外滚动，并在通过标题时消失。您的 .bottom-wrapper padding-top 应该是标题包装器内容的高度。
Cheers!
干杯!
回答by Blender
You are probably looking for z-index. It allows you to specify the vertical order of elements on the page, so an element with z-index: 10is floating above (visually) an element with z-index: 5.
您可能正在寻找z-index. 它允许您指定页面上元素的垂直顺序，因此带有 的元素z-index: 10浮动在（视觉上）带有 的元素上方z-index: 5。
Give the content z-index: 5and see if it works.
给出内容z-index: 5，看看它是否有效。
回答by Scott Sawyer
I was having a similar issue, and found a solution for my case. It should apply whether you are using a full screen background image, or a solid color (including white).
我遇到了类似的问题，并为我的案例找到了解决方案。无论您使用的是全屏背景图像还是纯色（包括白色），它都应该适用。
HTML
HTML
<div id="full-size-background"></div>
<div id="header">
<p>Some text that should be fixed to the top</p>
</div>
<div id="body-text">
<p>Some text that should be scrollable</p>
</div>
CSS
CSS
#full-size-background {
z-index:-1;
background-image:url(image.jpg);
background-position:fixed;
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
}
#header {
position:fixed;
background-image:url(image.jpg);
height:150px;
width:100%;
}
#body-text {
margin-top:150px;
}
This gives me the look of a full page image with a transparent fixed header and when the body content scrolls, it hides behind the header. The images appear seamless.
这给了我一个带有透明固定标题的整页图像的外观，当正文内容滚动时，它隐藏在标题后面。图像看起来是无缝的。
You could do the same thing with a solid color background, though, arguably, it would have been easier.
你可以用纯色背景做同样的事情，但可以说，它会更容易。
2 notes: the header has a set height, I have only tested in FF and Chrome.
2 注意：标题有一个设定的高度，我只在 FF 和 Chrome 中测试过。
回答by asymptote
Does #headerhave a set height?
是否#header有一组高度？
#header {position: fixed; height: 100px; }
#container {position: absolute; top: 100px; bottom: 0; overflow: auto; }
Pretty sure this wouldn't work in IE though...
很确定这在 IE 中不起作用......
回答by takrishna
Fix the position of the content div below the header + overflow-y the content div.
修复内容div在header下方的位置+overflow-y内容div。
回答by Paulo Cheque
- I have fixed background image
- The header background is transparent
- I don't want my content to override my transparent header
- 我有固定的背景图片
- 标题背景是透明的
- 我不希望我的内容覆盖我的透明标题
I came up with a solution scrolling the div instead the body:
我想出了一个滚动div而不是身体的解决方案：
<div>
<div class="header"></div>
<div class="content"></div>
</div>
.header { position: fixed; ... }
.content { position: fixed; height: calc(100% - HEADER_HEIGHT); overflow: scroll; }
回答by naveen
I too faced similar issue, but solved it using a simple dirty hack
我也遇到了类似的问题，但使用简单的脏黑客解决了它
1) have a white image in images folder
1）在图像文件夹中有一个白色图像
2) then add this css in header style
2）然后在标题样式中添加这个css
z-index:999; // to make header above the scrolling contents
background-image : url("../images/white.png"); // to hide the scrolling content
z-索引：999；// 在滚动内容上方制作标题
背景图片：url("../images/white.png"); // 隐藏滚动内容
3) It is done!!
3）完成了！！
回答by oaklandrichie
The header's z-index is set to 1000, so the z-index of the container would have to be 1001 if you want it to stack on top of the header. https://codepen.io/richiegarcia/pen/OJypzrL
标题的 z-index 设置为 1000，因此如果您希望它堆叠在标题的顶部，容器的 z-index 必须为 1001。https://codepen.io/richiegarcia/pen/OJypzrL
#header {
margin:0 auto;
position: fixed;
width:100%;
z-index:1000;
}
#topmenu {
background-color:#0000FF;
height:24px;
filter: alpha(opacity=50);
opacity: 0.5;
}
#leftlinks {
padding: 4px;
padding-left: 10px;
float: left;
}
#rightlinks {
padding: 4px;
padding-right: 10px;
float: right;
}
#containerfixedtop {
width: 100%;
height: 20px;
}
#contentfixedtop {
margin: 0 auto;
background-color: #DAA520;
width: 960px;
height:20px;
}
#container {
position: relative;
top: 68px;
width: 100%;
height: 2000px;
overflow: auto;
z-index:1001;
}
#content {
margin: 0 auto;
background-color: #DAA520;
width: 960px;
height: 2000px;
}
