如何调整两个div的z-index

Question

请在此处查看示例代码，而不更改html结构，是否有一种纯css方式可以在#b和#a之间重新排序#c？

问题更新：

由于UI限制， position规则无法更改 存在这样的情况。

#a {
  position: relative;
  background-color: red;
  width: 200px;
  height: 200px;
}
#b {
  position: absolute;
  top: 0;
  left: 30px;
  background-color: green;
  width: 100px;
  height: 100px;
}
#c {
  position: absolute;
  background-color: blue;
  width: 50px;
  height: 50px;
}

<div id="a">
  <div id="c"></div>
</div>
<div id="b"></div>

Answer 1

如果您希望{1}}显示在广场的角落，只需给它一个任意数字的#c（即z-index）。 z-index: 30属性允许您更改元素的堆叠顺序，因此z-index现在位于#c和#b之前。

#a

div {
  position: absolute;
}
#a {
  background-color: red;
  width: 200px;
  height: 200px;
}
#b {
  background-color: green;
  width: 100px;
  height: 100px;
}
#c {
  background-color: blue;
  width: 50px;
  z-index: 30;
  height: 50px;
}

Answer 2

尝试为#b添加z-index:100;，为#c

添加z-index:1000;

HTML部分

<div id="a">
  <div id="c"></div>
</div>
<div id="b"></div>  

CSS部分

div {
  position: absolute;
}
#a {
    background-color: red;
    width: 200px;
    height: 200px;
}
#b {
    background-color: green;
    width: 100px;
    height: 100px;
    z-index: 100;
}
#c {
    background-color: blue;
    width: 50px;
    height: 50px;
    z-index: 1000;
}