JSFiddle - React, Tailwind, and code Playground

HTML

<p><strong>The blue box</strong> represents the WordPress submenu element: <code>.wp-submenu</code></p>
<p><strong>The first grey box</strong> represents the WordPress menu wrapper:  <code>#adminmenuwrap</code></p>
<p><strong>The green box</strong> represents a custom element with a z-index of 10 inserted into the content area of the admin page</p>

<div class="correct-zindex">
    <p>When the parent "box1" element doesn't have a z-index, the child blue element z-index of 9999 works as expected.</p>
<div class="box1">
    <div class="box1-inner"></div>
</div>
<div class="box2">
    <div class="box2-inner"></div>
</div>
    <div class="clear"></div>
</div>


<div class="incorrect-zindex">
<p>When the parent "box1" element has a z-index of 2 set, its blue child element z-index of 9999 is not applied anymore and it goes below the green element that has z-index of 10 applied.</p>
<div class="box1">
     
    <div class="box1-inner"></div>
</div>
<div class="box2">
    <div class="box2-inner"></div>
</div>
</div>

CSS

.box1, .box2{
    float:left;
    width:100px;
    height:100px;
    margin-right:5px;
    background:#ccc;
    position:relative;
}

.box1-inner{
     position:absolute;
    width:80px;
    height:80px;
    background:blue;
    left:50px;
    z-index:9999;
}

.box2-inner{
     position:absolute;
    width:80px;
    height:80px;
    background:green;
    left:-20px;
    z-index:10;
}

.clear{
    clear:both;
}

.incorrect-zindex .box1{
    z-index:2;
}