z-index and stacking order - make child lower than parent but higher than uncle
<p>Please see the code in <a href="https://jsbin.com/nedisipuse/edit?html,css,output" rel="nofollow noreferrer">jsbin</a></p>

<p>Screenshot:</p>

<p><a href="https://i.stack.imgur.com/cinBU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cinBU.png" alt="enter image description here"></a></p>

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

<p><a href="https://i.stack.imgur.com/PI30y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PI30y.png" alt="enter image description here"></a></p>

<p>I tried <code>z-index</code>, create stacking context... nothing worked.</p>

<p>It might have something to do with negative margin in CSS</p>

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

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="out"&gt;
  &lt;div class="left"&gt;&lt;/div&gt;
  &lt;div class="bar"&gt;
    &lt;div class="circle"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="right"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<h2>Edit</h2>

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

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