z索引和堆叠顺序-使孩子低于父母但高于叔叔

Question

Please see the code in jsbin

Screenshot:

All I need is just to have blue on top, then white, then greens. So ideally:

I tried z-index , create stacking context... nothing worked.

It might have something to do with negative margin in CSS

I'm happy to change the HTML code or change the current CSS, as long as I can get the desired effect.

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

Edit

I should have mentioned that my difficulty was mostly achieving the effect while keeping the current HTML setup (ie circle in bar). Turns out it doesn't seem possible, because

1. If no zindex on bar, can't make sure it's on top of circle
2. If set zindex on bar, then it creates new stacking context, then circle can't be on top of 2 greens. Because greens are on different stacking context

Answer 1

you can simplify this using just the div out with 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 2

EDITED : edited my answer after reading more carefully :) sorry about that

see here > jsFiddle

or snippet below :

 .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 if you don't want different bg color for .left and .right just use one big div .out and position the bar and circle on top of it :

 .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

What if we just interchange .bar as child element of .circle . And try as below,

 .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

Use transform.

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

You could even further simplify your markup and utilize a pseudo selector instead of wrestling with stacking order, and order elements naturally.

 .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

You need a position before z-index will do anything. Since I don't see any applied in your current css that might be your issue.

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