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-index
on an element inside a fixed div
that is under the overlay.
您在覆盖层下的z-index
固定元素内的元素上设置 a div
。
In other words, the overlay hiding the z-index
value is 301.
换句话说,隐藏z-index
值的叠加层是 301。
You see, it's like lego blocks. .fixed
is at the bottom with its z-index at 0.
你看,这就像乐高积木。.fixed
位于底部,其 z-index 为 0。
Then on .fixed
your h3
is 300 blocks one over another.
然后.fixed
你h3
是 300 块一个接一个。
If we add, for example, another div
below the h3
tag with z-index
of 150, the "tower of blocks" would be lower than the h3
so h3
would be on the top.
如果再加上,例如,另一个div
下面h3
有标签z-index
的150,“块塔”将是低于h3
因此h3
会在顶部。
Then there is another div
(.overlay
) on the same DOM level as .fixed
with a higher z-index
than .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 .fixed
z-index
.
要将 h3 设置在顶部,请将其放在叠加层的相同 lvl 上或设置更高的.fixed
z-index
.
回答by pzin
You can't do that if .fixed
element is acting as a holderfor any of its children.
如果.fixed
element 充当其任何子项的持有者,则不能这样做。
This means that if, for example, you set your h3
with an absolute position to the bottom, it will go to the bottom of its parent element.
这意味着,例如,如果您h3
将绝对位置设置为底部,它将转到其父元素的底部。
z-index
works the same way. Its value will be inherited by the parent. Since the z-index
default value is 0
, your .fixed
element has a z-index
value of 0
, and your h3
has first0
and 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
,那么它就起作用了。