Html 将绝对放在相对定位元素后面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22151271/
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
Placing absolute behind relative positioned element
提问by Luca Nate Mahler
I have two elements in the same container, the first has position: absolute, the second position: relative. Is there a way to set the "z-index" of an absolute element so that its in the background? The relative positioned element should be on the top (z-layer) because it holds links...
我在同一个容器中有两个元素，第一个有position: absolute，第二个position: relative. 有没有办法设置绝对元素的“z-index”，使其在后台？相对定位的元素应该在顶部（z 层），因为它包含链接......
Here is a JSFiddle: http://jsfiddle.net/8eLJz/
这是一个 JSFiddle：http: //jsfiddle.net/8eLJz/
The absolute positioned element is on the top of the z-layer and I have no influence with the z-index-property. What can I do?
绝对定位元素位于 z 层的顶部，我对z-index- 属性没有影响。我能做什么？
回答by 2pha
I'm not sure which one you want in front, but you just need to set position on both and set z-index on both. http://jsfiddle.net/8eLJz/2/
我不确定你想要哪个在前面，但你只需要在两者上设置位置并在两者上设置 z-index。 http://jsfiddle.net/8eLJz/2/
a {
color: black;
}
nav#mainNav {
position: relative;
}
nav#mainNav > img {
position: absolute;
width: 100px;
left: 0;
z-index: 5;
}
nav#mainNav > a > img {
width: 100%;
}
nav#mainNav > nav {
width: 100%;
position: relative;
z-index: 10;
}
nav#mainNav > nav > a {
display: block;
text-align: right;
background-color: yellow;
}
回答by isherwood
回答by HJ05
CSS has a z-index property so on your nav#mainNav > imgselector just set z-index: -1;.
Here is a working jsFiddle: http://jsfiddle.net/8eLJz/1/
CSS 有一个 z-index 属性，因此在您的nav#mainNav > img选择器上只需设置z-index: -1;. 这是一个有效的 jsFiddle：http: //jsfiddle.net/8eLJz/1/
