Question: Z Index complexity - How to position a component inside of a div to have a higher z-index value against a component outside to its level?



.App {
  font-family: sans-serif;
  text-align: center;
}

.section-01 {
  position: relative;
  z-index: 0;
  background-color: red;
  color: white;
  padding: 2rem;
}

.section-02 {
  position: fixed;
  z-index: 1;
  background-color: blue;
  color: white;
  padding: 1rem;
  top: 25vh;
  left: 30vh;
}

.div-01 {
  z-index: 2;
  position: absolute;
  background-color: purple;
  padding: 1rem;
  top: 15vh;
  left: 25vh;
}
<section class="section-01">
        Section-01
        <div class="div-01">Div-01</div>
      </section>
      <section class="section-02">
        <div>Section - 02</div>
</section>



I have a component like this:
<section id='section-01' style={{zIndex: 0}}>
    <div id='div-01' style={{zIndex: 2}}>Hello World</div>
</section>
<section id='section-02' style={{zIndex: 1}}>
</section>

Now my problem is that due to absolute positioning of #section-02 and #div-01, #section-02 takes the precedence and shows above #div-01. However I don't want that, I want #div-01 to show up above #section-02 and #section-02 show up above #section-01.
Please note that I don't have access to alter code of #section-01 or #section-02. I can only control the code of #div-01.
I know that if parent element has lower z-index then its child won't be able to show above any other entity in hierarchy of parent element and so no matter how high I set the value of div-01 it will always show below section-02 so I wanted to know how can I solve this problem?
Adding code sandbox for example: https://codesandbox.io/s/ecstatic-flower-u5plui?file=/src/styles.css
Here's how it shows atm:

And here's how I want it to be:

Please note that you're only allowed to make changes in
.div-01 {
  position: relative;
  z-index: 2;
  position: absolute;
  background-color: purple;
  padding: 1rem;
  top: 6vh;
  left: 25vh;
}

or in JSX part (HTML):
<div className="div-01">Div-01</div>

I don't have access to section-01 or section-02.
I cannot restructure the HTML as these comes from different App owners and I have only control to div and its inner content.


Answer:
Objective
Given 2 sibling positioned elements (.section-01 and .section-02), of which the first element sits at a lower stacking context than the second element. Place the child positioned element of the first element (.section-01 > .div-01) above the second element (.section-02) in the z-axis.
Criterias
Only the child element of the first element (.section-01 > .div-01) may be modified by CSS (apparently by stylesheet?) and HTML (by JSX). The 2 sibling elements are generated by an app and for some reason are beyond reach (please read the XY problem).
Taking the aforementioned criterias into consideration, we cannot:

add, remove, or modify HTML (.div-01 is the exception)
add, remove, or modify CSS (.div-01 is the exception)

Problem
There are two stacking contexts:

.section-01 sits at z-index: 0 without any extended positioning (top, right, bottom, and left) nor does it reference any other positioned elements (position: relative).

.section-02 sits above everything else at z-index: 1 and it's position references the viewport (top, left, and position: fixed).


Naturally #2 stacking context will occupy the foreground. Even if .section-02 had z-index: 0 it would still be in the foreground because in HTML layout it proceeds .section-01. The only way to affect stacking context is to change the element that started it (ie. .section-01 and .section-02).
Solutions
If we could just resolve this issue without having to consider the impossible restrictions mentioned under Criterias, we can simply place .section-01 back into the normal flow of the document by assigning it position: static (or removing position: all together), thereby removing it as an origin of a stacking context and allowing it's child element, .div-01 to be the origin of it's own stacking context. (see Figure I).
Figure I
.section-01 {
  position: static;
  /* As it was originally, there was no real reason for it to have any `position` 
  property */;
}

.div-01 {
  position: fixed /* or `absolute` */;
  z-index: 2;
  /* ... */
}

Putting aside my doubts about the criterias being a genuine concern, (maybe it's too difficult to target the app's HTML/CSS because it assigns randomly determined #ids or .classes), there is a solution with the same result but in an indirect way.
Since the only element in our complete control is .div-01, we can target it's parent by using the .has() pseudo-class. (see Figure II)/
Figure II
/* This will target anything that is a direct ancestor (aka parent) of
.div-01 */
:has(> .div-01) {
  position: static
} 

.div-01 {
  position: fixed /* or absolute */;
  z-index: 2;

Example


html,
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font: 2ch/1.15 "Segoe UI";
}

.section-01 {
  position: relative;
  z-index: 0;
  padding: 2rem;
  color: white;
  background-color: red;
}

.section-02 {
  position: fixed;
  top: 10vh;
  left: 30vw;
  z-index: 1;
  Width: 40vw;
  height: 30vh;
  padding: 6rem 1rem 1rem;
  text-align: right;
  color: white;
  background-color: blue;
}

.div-01 {
  position: fixed;
  top: 5vh;
  left: 25vw;
  z-index: 2;
  width: 30vw;
  height: 30vh;
  padding: 1rem;
  color: white;
  background-color: purple;
}

:has(> .div-01) {
  position: static;
}
<section class="section-01">
  Section-01
  <div class="div-01">Div-01</div>
</section>
<section class="section-02">
  <div>Section - 02</div>
</section>