stacking with z-index, child element on top over parent sibling

Question

I ran into this challenge: fiddle. The short story is, I want to have the green block in the middle of the z-order, without having to change the HTML. So yellow on the bottom, green in the middle, and red on top.

.parent {
  background-color: yellow;
  position: absolute;
  top: 0;
  left: 0;
  height: 200px;
  width: 200px;
  z-index: 1;
}

.child {
  background-color: red;
  position: relative;
  top: 10px;
  left: 20px;
  height: 50px;
  width: 150px;
  z-index: 100;
}

.other-guy {
  background-color: green;
  position: absolute;
  top: 40px;
  left: 100px;
  height: 200px;
  width: 200px;
  z-index: 50;
}

<div class="parent">
  Chillin in the background
  <div class="child">
    I really want to be on top.
  </div>
</div>
<div class="other-guy"> I want to be in the middle! </div>

The longer story is, in my solution I'm using bootstraps grid system to position the child element so the whole thing is responsive. The middle layer is a Google Maps element that needs to be manipulated by the user. My previous solution had an absolutely positioned child element on the map, which works, but I don't know how to make that responsive.

My new solution works great from a responsive angle, but then I found out that the parent is blocking interaction with the maps.

So I now need a solution have some responsive elements on top of Google Maps.

Solution

I removed the position absolute from the yellow div and removed the z-index from the green div. Maybe this is something as you said.

.parent {
    background-color: yellow;
    
    top: 0;
    left: 0;
    height: 200px;
    width: 200px;
    z-index: 1;
}
.child {
    background-color: red;
    position: relative;
    top: 10px;
    left: 20px;
    height: 50px;
    width: 150px;
    z-index: 2;
}
.other-guy {
    background-color: green;
    position: absolute;
    top: 40px;
    left: 100px;
    height: 200px;
    width: 200px;
    
}

<div class="parent">Chillin in the background
    <div class="child">I really want to be on top.</div>
</div>
<div class="other-guy">I want to be in the middle!</div>

Comments

[Coo]

Why do I get a different result with your code? Your snippet looks like it is what I need...

[Coo]

This effectively changes the HTML doesn't it?

[CodeRomeos]

.parent { background-color: yellow; /*position:absolute*/ top: 0; position is not in above snippet.

[Lisa]

I come to you from the future to add that if you use transforms on the parent or the children, this does not work.