Display Element Between Child and Parent

Question

I am trying to render an element between two nested elements. This is probably best explained with an example:

#parent {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  
  z-index: 0;
  
  background-color: red;
}

#child {
  position: fixed;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  
  z-index: 2;
  
  background-color: blue;
}

#other {
  position: fixed;
  top: 25px;
  left: 25px;
  width: 50px;
  height: 50px;
  
  z-index: 1;
  
  background-color: green;
}

<div id="parent">
  <div id="child"></div>
</div>

<!-- I want to have this element in between the "parent" and "child". -->
<div id="other"></div>

In this case, I want the green ("#other") element to be rendered in between (z-depth wise) the red parent ("#parent") and blue child ("#child") elements. In other words, I want the blue element to be on top.

From my understanding this is not possible using CSS's z-depth (like I attempted) since the elements are nested, but I can't seem to figure out a different way.

I would like to keep the HTML how it is, if possible, and do this entirely in CSS.

Thanks in advance!

Answer 1

just removed the position:fixed from #parent. You can add position: static; for #parent.

Please check this demo: https://codepen.io/anon/pen/dwZRMe

Answer 2

Your question is still not clear, so I'll recommend existing solutions.

First, you can move around elements using js, if you wish to not touch html. Refer this link.

Secondly, this kind of functionality is closely related to wrapping of elements. This is present in jquery as well.

Thirdly, you may want to check out :before and :after psuedo elements.Checkout this link.

Answer 3

Nesting plays a big role for z-index. If #other element sits on top of #parent element, a #child element of #parent can never be higher than #other element. This is an important rule for z-index.

In this case, you can change your HTML code in the following ways to create the shape you want.

#parent {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  
  z-index: 0;
  
  background-color: red;
}

#child {
  position: fixed;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  
  z-index: 2;
  
  background-color: blue;
}

#other {
  position: fixed;
  top: 25px;
  left: 25px;
  width: 50px;
  height: 50px;
  
  z-index: 1;
  
  background-color: green;
}

<div id="parent">
  <div id="child"></div>
  <div id="other"></div>
</div>

#parent {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  
  z-index: 0;
  
  background-color: red;
}

#child {
  position: fixed;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  
  z-index: 2;
  
  background-color: blue;
}

#other {
  position: fixed;
  top: 25px;
  left: 25px;
  width: 50px;
  height: 50px;
  
  z-index: 1;
  
  background-color: green;
}

<div id="parent"></div>
<div id="child"></div>
<div id="other"></div>

EDIT: To keep the HTML, no need to use any position style for #parent and remove top|left|z-index values too in it.

#parent {
  width: 200px;
  height: 200px;
  background-color: red;
}

#child {
  position: fixed;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  
  z-index: 2;
  
  background-color: blue;
}

#other {
  position: fixed;
  top: 25px;
  left: 25px;
  width: 50px;
  height: 50px;
  
  z-index: 1;
  
  background-color: green;
}

<div id="parent">
  <div id="child"></div>
</div>
<div id="other"></div>