Question

#parent {
  position: relative;
  background: red;
  width: 100px;
  height: 100px;
  z-index: 1;
}

#child {
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: -1;
  transform: translateX(20px);
}

<div id="parent">
  <p>
   qqq
  </p>
  <div id="child" >
    test
  </div>
</div>

如果我没有将父级的z-index设置为1，则子级的z-index将把它放在父级之下。但是，当我将父级的z-index设置为1（或任何大于0的数字）时，子级的z-index将不起作用！

为什么会发生这种情况？

Answer 1

默认情况下，所有背景颜色都在文本后面。 z-index默认为auto，表示＆＃34;设置堆栈顺序等于其父项＆＃34;。但是，在子项上使用z-index会将其移出自然堆栈顺序并将其置于背景之后。如果您将父级更改为也具有Z-Index，则它将重新加入堆栈，并且背景颜色将再次出现在文本后面。

父和子都设置为AUTO。两者都在同一堆栈中。

＆＃13;

#parent {
  position: absolute;
  background: red;
  width: 100px;
  height: 100px;
}

#child {
  position: absolute;
  top: 50px;
  left: 50px;
  transform: translateX(20px);
}

＆＃13;

<div id="parent">
  <div>
   qqq
  </div>
  <div id="child" >
    test
  </div>
</div>

＆＃13;

Child设置为z-index -1，现在它与父

不在同一堆栈中

＆＃13;

#parent {
  position: absolute;
  background: red;
  width: 100px;
  height: 100px;
}

#child {
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: -1;
  transform: translateX(20px);
}

＆＃13;

<div id="parent">
  <div>
   qqq
  </div>
  <div id="child" >
    test
  </div>
</div>

＆＃13;

子项设置为z-index -1，父项设置为z-index 1，使它们都在同一堆栈中，因此背景颜色放在两个元素后面。

＆＃13;

#parent {
  position: absolute;
  background: red;
  width: 100px;
  height: 100px;
  z-index: 1;
}

#child {
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: -1;
  transform: translateX(20px);
}

＆＃13;

<div id="parent">
  <div>
   qqq
  </div>
  <div id="child" >
    test
  </div>
</div>

＆＃13;

Answer 2

当然，如果您将foreach (var key in TempData.Keys.ToList()) { TempData.Remove(key); }设置为孩子，孩子将会在父母身后。如果您从孩子那里删除了z-index: -1;，您也可以从父母那里删除z-index: -1;。

z-index: 1;

#parent {
  position: relative;
  background: red;
  width: 100px;
  height: 100px;
  /*z-index: 1;*/
}

#child {
  background: green;
  position: absolute;
  top: 50px;
  left: 50px;
  /*z-index: -1;*/
  transform: translateX(20px);
}

父z-index如何影响子z-index

2 个答案: