Question

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

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

绝对定位元素位于z层的顶部，我对z-index - 属性没有影响。我该怎么办？

Answer 1

我不确定你想要哪一个，但你只需要在两者上设置位置并在两者上设置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;
}

Answer 2

http://jsfiddle.net/8eLJz/3/

nav#mainNav > img {
    z-index: -1;
}

Answer 3

CSS具有z-index属性，所以在nav#mainNav > img选择器上设置z-index: -1;。这是一个有效的jsFiddle：http://jsfiddle.net/8eLJz/1/

将绝对置于相对定位元素后面

3 个答案: