带有几个绝对定位元素的z-index问题

时间:2011-12-02 11:38:52

标签: css z-index css-position

是否可以将元素置于绝对定位元素内并位于另一个绝对定位元素下的前景中?

例如:

<div id="el1">
  <div id="test1">Test 1</div>
</div>
<div id="el2">
  <div id="test2">Test 2</div>
</div>

CSS:

#el1, #el2, #test1, #test2 {
  position: absolute;
  top: 0;
  left: 0;
}

#el1 {
  z-index: 2;
}

#el2 {
  z-index: 1;
}

#test1, #test2 {
  z-index: 3;
}

所有元素都是绝对定位的,第一个元素位于第二个元素之上。现在我想在前台安装两个测试元素。这是不可能的,因为第二个z-index不适用,因为它在#el2里面。是否有任何解决方案或我是否必须将测试元素置于其他元素之外?

1 个答案:

答案 0 :(得分:2)

子元素将继承父元素z-index。您必须更改标记的结构以重新选择所需的z-indexing。

<div id="el1">
</div>
<div id="el2">
</div>
<div id="test1">Test 1</div>
<div id="test2">Test 2</div>
相关问题