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

Question

我在同一个容器中有两个元素，第一个有position: absolute，第二个有position: relative。有没有办法设置绝对元素的"z-index“，使其处于背景中？相对定位的元素应该在顶部(z层)，因为它包含链接...

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

绝对定位元素位于z层的顶部，我对z-index-property没有任何影响。我能做什么?

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- nav#mainNav > img属性，所以在索引选择器上只需设置z-index: -1;即可。下面是一个有效的jsFiddle：http://jsfiddle.net/8eLJz/1/