Trouble with ArcGIS Feature Table Displaying Over Calcite Popover (Z-index)

[JasonBartling1]

I am using the 4.33 maps SDK and calcite 3.2.1 and I would like to have the calcite popover windows in my application always display above any other elements.  Right now I have an arcgis feature table that displays above the calcite popovers.  I have tried adjusting the z-index in my css for these elements, but no values seem to the achieve the desired effect.  

Here is a codepen that shows the issue:  https://codepen.io/windowslover/pen/ByLLmrP

If I set the z-index to -1 in my #tableDiv css rule the feature table no longer appears above the popovers but then it displays behind the arcgis-coordinate-coversion widget and bottom application attribution, which is not desired.

Is there a css variable or some other setting that I can use to get the desired effect where the arcgis-feature-table is right below calcite popovers in z-index arrangement?

Edit:  I forgot to mention you can drag/resize/expand the feature table with the button and edge of the feature table.

[MatthewDriscoll]

The code pen you provided didn't have a number in the z-index for the #table-placement.  

#table-placement {
  z-index: 1;
}

.widget-stack {
  position: relative;
  z-index: 10;
}

[JasonBartling1]

Ah geez.  I can't believe I somehow missed my .widget-stack class z-index. What you provided is very close to what I am going for, except I want the widget icons themselves to be covered with the open popovers visible.  I think I am going to need to move the calcite-popovers out of my widget-stack div to accomplish this.  Thank you so much for getting me on the right track though!

[MatthewDriscoll · Accepted solution]

Change the widget-stack z-index to auto, this basically isolates it from it's children.  Then you can independently move the popover children. 

     .widget-stack {
        position: relative;
        top: 50px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        z-index: auto;
      }

      calcite-popover {
        position: relative;
        z-index: 5; 
      }
     
      #table-placement {
        position: absolute;
        z-index: 1;
      }

[JasonBartling1]

This is exactly what I was going for.  Thank you very much!