Is it possible to have a child have a higher z index than its parent

Question

Code Extract:

<div class="parent">
    <div class="child">

    </div>
</div>

<div class="other">

</div>

What i want to do is have the other class render above parent but below child is this possible?

Answer 1

.parent {
  width: 300px;
  height: 300px;
  background-color: #F4F4F4;
}

.child {
  width: 200px;
  height: 200px;
  background-color: red;
  border: 4px solid #000;
  opacity: .9;
  
  position: relative;
  z-index: 2;
}

.other {
  width: 150px;
  height: 150px;
  background-color: green;
  border: 4px solid #000;
  opacity: .9;
  
  position: absolute;
  top: 150px;
  z-index: 1;
}

<div class="parent">
    <div class="child">

    </div>
</div>

<div class="other"></div>