Z-index 问题 - 如何将子元素带到父元素的下面？

Question

我遇到了 z-index 问题。如何将 DIV C 置于前台？我的意思是，如何将 DIV C 放在 DIV B 前面？

有没有办法做到这一点并为 DIV A 和 DIV B 保持相同的 z-index（而不减少 "DIV B" 的 z-index）？

HTML

<div class="a">
  DIV A
  <div class="c">DIV C</div>
</div>

<div class="b">DIV B</div>

CSS

.a,
.b {
  height: 100px;
  position: relative;
  z-index: 10;
  margin-bottom: 8px;
  z-index: 10;
}

.a { background-color: #2196F3; }
.b { background-color: rgba(156, 39, 176, .9); }

.c {
  background-color: #FFC107;
  height: 100px;
  width: 100px;
  position: absolute;
  left: 50px;
  top: 50px;
}

这个例子在这里：http://codepen.io/willianribeiro/pen/LpoNJg?editors=110

Answer 1

考虑到 a 是 c 的 parent，您需要将 a 置于 b 之上，进而将 c 以上 b.

如果您想完全独立地对待它们中的每一个，则必须重组您的 html，以便 c 不是 a 的 child。

Answer 2

由于 c 嵌套在 a 中，它的 z-index 将与嵌套在 div a 中的其他元素进行比较。如果c在a中，b和a有相同的z-index，我认为你不能把c放在b前面。我只想考虑重组你的 html

Answer 3

您需要为 .c 和 .b 设置 z-index

   

 .a, .b {
    height: 100px;
    position: relative;
    z-index: 10;
    margin-bottom: 8px;
}
.a {
    background-color: #2196F3;
}
.b {
    background-color: rgba(156, 39, 176, .9);
    z-index:1;
}
.c {
    background-color: #FFC107;
    height: 100px;
    width: 100px;
    position: absolute;
    left: 50px;
    top: 50px;
    z-index: 10;
}

  

<div class="a">DIV A
    <div class="c">DIV C</div>
</div>
<div class="b">DIV B</div>

Answer 4

.a, .b {
  height: 100px;
  position: relative;
  margin-bottom: 8px;

}

.a { background-color: #2196F3; z-index: 10; }
.b { background-color: rgba(156, 39, 176, .9); }

.c {
  background-color: #FFC107;
  height: 100px;
  width: 100px;
  position: absolute;
  left: 50px;
  top: 50px;
}

<div class="a">
  DIV A
  <div class="c">DIV C</div>
</div>

<div class="b">DIV B</div>

Z-index 问题 - 如何将子元素带到父元素的下面？

Z-index issues - How to bring a child element onto the parent's below element?

html

css

z-index