Question

我在使用z-index时遇到了一些麻烦。这是我简化的布局：

<div id="overlapper"></div>
<div id="container">
    <div id="child1"></div>
    <div id="child2"></div>
</div>

我需要overlapper出现在child1前面，但在child2后面。我试着搞乱z索引，但它没有用，我认为是因为堆叠环境。

请帮忙吗？感谢

Answer 1

首先，请确保overlapper，child1和child2属于同一堆叠环境。

也就是说，确保container没有创建堆叠上下文：

container不能是根元素。
container必须具有position，z-index，opacity和isolation属性的默认值：
- position: static或z-index: auto
- opacity: 1
- isolation: auto

现在，将overlapper，child1和child2定位元素，然后根据需要添加z-index。

＆＃13;

#overlapper, #child1, #child2 {
  position: relative;
  padding: 30px;
  height: 20px;
}
#overlapper {
  z-index: 3;
  background: red;
  top: 60px;
  margin-left: 20px;
}
#container {
  margin-top: -40px;
}
#child1 {
  z-index: 2;
  background: green;
  top: -40px;
}
#child2 {
  z-index: 4;
  background: blue;
  margin-left: 40px;
}

＆＃13;

<div id="overlapper">Overlapper</div>
<div id="container">
    <div id="child1">Child 1</div>
    <div id="child2">Child 2</div>
</div>

＆＃13;

Answer 2

HTML

<div id="overlapper"></div>
<div id="container">
    <div id="child1"></div>
    <div id="child2"></div>
</div>

CSS

#overlapper, #child1, #child2
{
    height: 100px;
    width: 100px;
    position: absolute;
}
#overlapper
{
    background: red;
    top : 40px;
    left : 40px;
    z-index: 1;
}
#child1
{
    background: yellow;
    z-index: 0;
}
#child2
{
    top: 60px;
    left : 60px;
    background: black; 
    z-index: 2;
}

Fidle Here

Z-Index与不同的父母

2 个答案: