z-index 和堆叠顺序 - 使 child 低于 parent 但高于叔叔

Question

请看jsbin

中的代码

截图：

我只需要顶部有蓝色，然后是白色，然后是绿色。所以理想情况下：

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

可能与CSS

中的负边距有关

我很乐意更改HTML代码或更改当前CSS，只要能达到我想要的效果。

.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;
}

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

编辑

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

如果 bar 上没有 zindex，则无法确定它在圆的顶部
如果在 bar 上设置 zindex，那么它会创建新的堆叠上下文，然后 circle 不能位于 2 个果岭之上。因为 greens 处于不同的堆叠上下文

Answer 1

在 z-index 执行任何操作之前，您需要一个位置。由于我没有在您当前的 css 中看到任何应用，这可能是您的问题。

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

Answer 2

已编辑：仔细阅读后编辑了我的答案:)对此感到抱歉

看这里 > jsFiddle

或下面的代码片段：

.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;}

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

OR 如果你不想让 .left 和 .right 有不同的背景颜色，只需要使用一个大的 div .out 并将 bar 和 circle 放在它上面：

.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
}

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

Answer 3

使用变换。

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 4

您可以仅使用 div out 和 position + 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 5

您甚至可以进一步简化您的标记并使用 pseudo selector 而不是与堆叠顺序搏斗，并自然地对元素进行排序。

.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;
}

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

Answer 6

如果我们只是将 .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>

z-index 和堆叠顺序 - 使 child 低于 parent 但高于叔叔

z-index and stacking order - make child lower than parent but higher than uncle

html

css

margin

z-index

编辑