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?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.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;
}

<!-- language: lang-html -->

<section class="section-01">
        Section-01
        <div class="div-01">Div-01</div>
      </section>
      <section class="section-02">
        <div>Section - 02</div>
</section>

<!-- end snippet -->

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.

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:

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

2. .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

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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;
}

<!-- language: lang-html -->

<section class="section-01">
        Section-01
        <div class="div-01">Div-01</div>
      </section>
      <section class="section-02">
        <div>Section - 02</div>
</section>

<!-- end snippet -->

If you want div-01 to appear on top of section-02 while maintaining section-01 below both, you will need to adjust the HTML structure slightly, by adding a common index context with position relative as shown below:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.container {
  position: relative;
}

.section-01 {
  width: 100vw;
  position: relative;
  z-index: 1;
  background-color: red;
  color: white;
  padding: 2rem;
  border: 1px solid red;
}

.section-02 {
  position: absolute;
  z-index: 2;
  background-color: blue;
  color: white;
  padding: 1rem;
  top: 4.6rem;
  left: 11rem;
}

.div-01 {
  z-index: 3;
  position: absolute;
  background-color: purple;
  padding: 1rem;
  top: 2.5rem;
  left: 10rem;
}

<!-- language: lang-html -->

<div class="container">
  <section class="section-01">
    Section-01
  </section>
  <div class="div-01">Div-01</div>
  <section class="section-02">
    <div>Section - 02</div>
  </section>
</div>

<!-- end snippet -->

You cant change the z-index of section-02 to -1 like this

<section id='section-02' style={{zIndex: -1}}>
</section>