How to deal with stacking context problem

Question

I am reviewing the stack context concept and am confused about the following example In the parent div, we create a new stack context and I do not understand why the child stack above the parent div, I am also using this image as a reference.

.parent {
  width: 200px;
  height: 100px;
  background: #168bf5;
  position: relative;
  /* Generate new stacking context */
  z-index: 1;
}

.child {
  width: 100px;
  height: 200px;
  background: #32d19c;
  z-index: -1;
}

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

Answer 1

Since you've created a new stacking context for .parent, setting z-index on its children only changes their stacking order relative to other children of the same block. An element can't be layered behind its own stacking context. To put the child behind its parent, let its z-index work relative to the document (or some other common ancestor that's further up the DOM).

A stacking context is formed... by any...
Element with a position value absolute or relative and z-index value other than auto.
— stacking context

.box {
  position: relative;
  /* Generate new stacking context here */
}

.parent {
  width: 200px;
  height: 100px;
  background: #168bf5;
  margin: 0 0 0 40px;
  /* position: relative; */
  /* Do not generate new stacking context here */
}

.child {
  position: relative;
  width: 100px;
  height: 200px;
  background: #32d19c;
  margin: 0 0 0 -40px;
  z-index: -1;
}

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

---

In the example you linked, the .box element is set to display:flex. A stacking context is also created when an element "is a child of a flex container, with z-index value other than auto" (stacking context). We can remove the z-index value from .parent to avoid giving it a new stacking context.

.box {
  display: flex;
}

.parent {
  width: 200px;
  height: 100px;
  background: #168bf5;
  margin: 0 0 0 40px;
  /* z-index: 1; */
  /* Do not generate a new stacking context here */
}

.child {
  width: 100px;
  height: 200px;
  background: #32d19c;
  margin: 0 0 0 -40px;
  position: relative;
  z-index: -1;
}

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