Html z-index 和 position fixed 如何在 css 中协同工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16362113/
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
How does z-index and position fixed work together in css
提问by Siddhartha
html
html
<div class="overlay">
</div>
<div class="fixed">
<center>
<h3>
Only this thing should be brought on top of overlay..
</h3>
</center>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br>
CSS:
CSS：
.fixed{
position: fixed;
width: 100%;
height: 60px;
top:0;
left: 0;
background: #f4f4f4;
}
.fixed h3{
position:relative;
z-index: 300;
color: #fff;
}
.overlay{
background-color: #000;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: .5;
position: fixed;
z-index: 1;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
Now how do I place get the h3 inside the .fixed div on top of overlay. Please post some reading on fixed along with z-index.
现在我如何将 h3 放置在 .fixed div 中的叠加层之上。请与 z-index 一起发布一些关于 fixed 的阅读。
http://jsfiddle.net/CvMLw/4/Check the above jsfiddle, So how do i bring the h3 on top of overlay..
http://jsfiddle.net/CvMLw/4/检查上面的 jsfiddle，那么我如何将 h3 放在叠加层之上..
回答by Karl-André Gagnon
You set a z-indexon an element inside a fixed divthat is under the overlay.
您在覆盖层下的z-index固定元素内的元素上设置 a div。
In other words, the overlay hiding the z-indexvalue is 301.
换句话说，隐藏z-index值的叠加层是 301。
You see, it's like lego blocks. .fixedis at the bottom with its z-index at 0.
你看，这就像乐高积木。.fixed位于底部，其 z-index 为 0。
Then on .fixedyour h3is 300 blocks one over another.
然后.fixed你h3是 300 块一个接一个。
If we add, for example, another divbelow the h3tag with z-indexof 150, the "tower of blocks" would be lower than the h3so h3would be on the top.
如果再加上，例如，另一个div下面h3有标签z-index的150，“块塔”将是低于h3因此h3会在顶部。
Then there is another div(.overlay) on the same DOM level as .fixedwith a higher z-indexthan .fixed. This block would placed right over the 300 blocks of h3.
然后还有另外一个div（.overlay）在同一水平DOM作为.fixed具有较高z-index比.fixed。这个块将放置在 300 个块的正上方h3。
For example:
例如：
<==============================> <- the .overlay (z-index 1)
<=>
<=>
<=>
<=>
<=> <=> <- Elements inside .fixed (random z-index)
<=> <=>
<=> <=>
<=> <=>
<=> <=>
<==============================> <- the .fixed (z-index 0)
To set the h3 on top, put it on the same lvl of your overlay or set a higher .fixedz-index.
要将 h3 设置在顶部，请将其放在叠加层的相同 lvl 上或设置更高的.fixedz-index.
回答by pzin
You can't do that if .fixedelement is acting as a holderfor any of its children.
如果.fixedelement 充当其任何子项的持有者，则不能这样做。
This means that if, for example, you set your h3with an absolute position to the bottom, it will go to the bottom of its parent element.
这意味着，例如，如果您h3将绝对位置设置为底部，它将转到其父元素的底部。
z-indexworks the same way. Its value will be inherited by the parent. Since the z-indexdefault value is 0, your .fixedelement has a z-indexvalue of 0, and your h3has first0and then 300.
z-index工作方式相同。它的值将由父级继承。由于z-index默认值是0，你的.fixed元素具有z-index的价值0，和你h3有第一次0，然后300。
回答by Sebastien Axinte
Change your
改变你的
position:fixed;
to
到
position:absolute;
on .fixed, then it works.
on .fixed，那么它就起作用了。
