绝对地放置在相对定位的元素之后 [英] Placing absolute behind relative positioned element

问题描述

我在同一个容器中有两个元素，第一个 position：absolute ，第二个 position：relative 。有没有办法设置绝对元素的z-index，以便它在背景中？相对定位的元素应该位于顶层（z层），因为它包含链接...

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...

这里是一个JSFiddle：http://jsfiddle.net/8eLJz/

Here is a JSFiddle: http://jsfiddle.net/8eLJz/

绝对定位元素位于z层的顶部我对 z-index -property没有影响。我可以做什么？

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-index。
http://jsfiddle.net/8eLJz/2/

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/

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;
}

这篇关于绝对地放置在相对定位的元素之后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！