z-index和堆叠顺序 - 使子女低于父，但高于叔叔

Question

请参阅jsbin

中的代码

截图：

我所需要的只是让蓝色在上面，然后是白色，然后是绿色。理想情况下：

我尝试z-index，创建堆叠上下文......没有任何效果。

它可能与CSS中的负边距有关

我很乐意更改HTML代码或更改当前的CSS，只要我能够获得所需的效果。

＆＃13;

＆＃13;

.left,
.right {
  width: 200px;
  height: 60px;
  background-color: green;
  display: inline-block;
}
.bar {
  width: 20px;
  height: 60px;
  background-color: blue;
  display: inline-block;
}
.circle {
  height: 40px;
  width: 40px;
  background-color: white;
  border-radius: 50%;
  margin-left: -10px;
  margin-top: 10px;
}

＆＃13;

<div class="out">
  <div class="left"></div>
  <div class="bar">
    <div class="circle"></div>
  </div>
  <div class="right"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

修改

我应该提到我的困难主要是在保持当前HTML设置（即圆圈为条形）的同时实现效果。事实证明它似乎不可能，因为

1. 如果栏上没有zindex，则无法确定它在圈子顶部
2. 如果在条形图上设置zindex，则会创建新的堆叠上下文，然后圆圈不能在2个绿色之上。因为绿色位于不同的堆叠环境

Answer 1

您只需使用out + position

的div z-index来简化此操作

.out {
  position: relative;
  width: 400px;
  height: 60px;
  background-color: green;
}
.bar {
  width: 20px;
  height: 60px;
  background-color: blue;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 10
}
.circle {
  height: 40px;
  width: 40px;
  background-color: white;
  border-radius: 50%;
  margin-left: -10px;
  margin-top: 10px;
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1
}

<div class="out">
  <div class="circle"></div>
  <div class="bar"></div>
</div>

Answer 2

EDITED：在仔细阅读后编辑了我的答案:)抱歉

见这里＆gt; jsFiddle

或以下代码段：

＆＃13;

＆＃13;

.left, .right {
  width: 200px;
  height: 60px;
  background-color: green;
  display: inline-block;
    position:relative;
       z-index:1;
}

.bar {
  width: 20px;
  height: 60px;
  background-color: blue;
  display: inline-block;
  z-index:6;
  position:relative;
 

}
.circle {
  height: 40px;
  width: 40px;
  background-color: white;
  border-radius: 50%;
  top: 10px;
  position:absolute;
 
 left:0;
 right:0;
  margin:0 auto;
  z-index:5;
}
.out {width:420px;position:relative;}

＆＃13;

<div class="out">
    <div class="left"></div><div class="bar"></div><div class="circle"></div><div class="right"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

或如果您不希望.left和.right使用不同的bg颜色，只需使用一个大div .out并定位{{1} }和bar在它之上：

＆＃13;

＆＃13;

circle

＆＃13;

.out {
  position: relative;
  width: 420px;
  height: 60px;
  background-color: green;
}
.bar {
  width: 20px;
  height: 100%;
  background-color: blue;
   position: absolute;
  left: 0;
  right:0;
  margin:0 auto;
  z-index: 2
}
.circle {
   height: 40px;
  width: 40px;
  background-color: white;
  border-radius: 50%;
   position: absolute;
  top: 10px;
   left: 0;
  right:0;
  margin:0 auto;
  z-index: 1
}

＆＃13;

＆＃13;

＆＃13;

Answer 3

如果我们只将.bar作为.circle的子元素进行交换，该怎么办？并尝试如下，

.left, .right {
  width: 200px;
  height: 60px;
  background-color: green;
  display: inline-block;
}
.bar {
  width: 20px;
  height: 60px;
  background-color: blue;
  margin:-10px 10px;
}
.circle {
  height: 40px;
  width: 40px;
  background-color: white;
  border-radius: 50%;
  display:inline-block;
  position:absolute;
  margin:10px -20px;
}

 <div class="out">
    <div class="left"></div>
    <div class="circle"><div class="bar"></div></div>
    <div class="right"></div>
 </div>

Answer 4

使用转换。

https://jsbin.com/geconefine/1/edit?html,css,output

.out{
  position: relative;
  z-index: 0;
}

.left, .right {
  width: 200px;
  height: 60px;
  background-color: green;
  display: inline-block;
  position: relative;
  z-index: -2;
}

.bar {
  width: 20px;
  height: 60px;
  background-color: blue;
  display: inline-block;
  position: relative;
}
.circle {
  height: 40px;
  width: 40px;
  background-color: white;
  border-radius: 50%;
  transform: translateX(-10px);
  margin-top: 10px;
  position: relative;
  z-index: -1;
}

Answer 5

您甚至可以进一步简化标记并使用pseudo selector而不是与堆叠顺序进行摔跤，并自然地订购元素。

＆＃13;

＆＃13;

.out {
  width: 400px;
  padding: 10px 0;
  background: green;
}
.circle {
  height: 40px;
  width: 40px;
  background-color: white;
  border-radius: 100%;
  display: block;
  margin: 0 auto;
  position: relative;
}
.circle:after {
  content: '';
  width: 20px;
  height: 60px;
  background-color: blue;
  display: block;
  margin: 0 auto;
  position: absolute;
  top: -10px;
  left: 10px;
}

＆＃13;

<div class="out">
  <div class="left"></div>
  <div class="circle"></div>
  <div class="right"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 6

在z-index之前你需要一个位置。由于我没有在您当前的css中看到任何可能是您的问题。

.left, .right{
  position: relative;
  z-index: 1;
}
.circle{
  position: relative;
  z-index: 4;
}
.bar{
  position: relative;
  z-index: 5;
}