将绝对值放在相对定位元素后面

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

您可以在图像上放置负 z 索引，这将导致它在其他元素后面分层：

a {
  color: black;
}
nav#mainNav {
  position: relative;
}
nav#mainNav>img {
  position: absolute;
  width: 100px;
  left: 0;
  z-index: -1; /* <----------------------------------- HERE I AM! */
}
nav#mainNav>a>img {
  width: 100%;
}
nav#mainNav>nav {
  width: 100%;
}
nav#mainNav>nav>a {
  display: block;
  text-align: right;
  background-color: yellow;
}

<nav id="mainNav">
  <img src="http://www.colourbox.com/preview/7389458-682747-example-stamp.jpg" />
  <nav> <a href="/">Some Text</a>
    <a href="/">Some Text</a>
  </nav>
</nav>

Answer 3

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

Answer 4

我认为项目的顺序（position relative一个和position absolute一个）也很重要。

a {
    color: black;
}
nav#mainNav {
    position: relative;
}
nav#mainNav > img {
    position: absolute;
    width: 100px;
    left: 0;
    z-index: -1;
}
nav#mainNav > nav {
    width: 100%;
}
nav#mainNav > nav > a {
    display: block;
}

<nav id="mainNav">
    <!-- this one first -->
    <img
        src="http://www.colourbox.com/preview/7389458-682747-example-stamp.jpg"
    />
    
    <!-- this one second -->
    <nav>
        <a href="/">Some Text</a>
        <a href="/">Some Text</a>
    </nav>
</nav>

如果我更改顺序，它对我不起作用