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

Question

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

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

绝对定位的元素在z层的顶部，我无法通过z-index属性进行干预。 我该怎么做？

- Luca Nate Mahler

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

- 2pha

Answer 2

您可以在图片上放置一个负的 z-index 属性，这会使其位于其他元素的后面：

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>

- isherwood

Answer 3

CSS有一个z-index属性，因此在您的nav#mainNav > img选择器中，只需设置z-index: -1;即可。

这是一个可工作的jsFiddle：http://jsfiddle.net/8eLJz/1/

- HJ05

Answer 4

我认为项目的顺序（相对定位和绝对定位）也很重要。

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>

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

- Sanka Sanjeewa

---

你的问题是nav#mainNav > nav上没有设置位置和z-index。 - 2pha