Is there stacking context(z-index) priority?

Question

Background

I've learned z-index working with stacking-context https://drafts.csswg.org/css2/#elaborate-stacking-contexts

And there are a lot of properties that can make stacking-context. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

But I've noticed stacking context does not work with positoin: relative child and opacity: 0.9 child.

In my code example, the blue box behind the red box. But if I uncomment position: relative; z-index is worked fine what I wanted.

Question

What is the difference make stacking context with position / opacity or transform?

section {
  width: 50%;
  height: 200px;
}

.box {
  width: 400px;
  height: 200px;
  background: blue;
  z-index: 5;
  /* Worked! */
  /* position: relative; */
  
  /* Not Worked */
  opacity: 0.9;
  /*   transform: translate(10px, 10px); */
}

.box-2 {
  width: 200px;
  height: 200px;
  background: red;
  margin-top: -50px;
  border: 5px solid black;
  position: absolute;
  z-index: 1;
}

<section>
  <div class="box"></div>
  <div class="box-2"></div>
</section>