Using jQGrid How Can I Prevent a Container from Being Disabled

Question

Using jqGrid 4.15.6-pre - free

I open an Add form to add a new row. I one of the cells I have click dataEvent that calls the folowing:

function accessBudgetView(){
        
$('.rma-miscdisplay2-zoom600995').load("/QMSWebApp/RMAControllerServlet",
{lifecycle:"accessRMAMONumberRequestBudgetLayout",
nextMONumberRequestIndex:nextMONumberRequestIndex,
recseq:0}, function(){$('.rma-miscdisplay2-zoom600995').show("slide", { direction: "right" }, 
1000);});
                    
}

This is my container code:

<div class="rmaMainBody"></div>
<div class="rma-miscdisplay"></div>
<div class="rma-miscdisplay2"></div>
<div class="rma-miscdisplay2-zoom600995"></div>
<div class="rma-miscdisplay3"></div>

My problem is the called container is disabled even though I have the z-index set higher than the addForm z-index.

Update: CSS Code for called container:

.rma-miscdisplay2-zoom600995{
overflow-y: auto;
display: none;
position: absolute;
padding: 5px;
top: 100px;
bottom: 0px;
right: 2px;
background-color: silver;
color: blue;
padding: 2px;
z-index: 600995;
border-style: solid;
border-color: white;
border-width: thin; 

    
} 

Answer 1

z-index only works on positioned elements. If you try to set a z-index on a non-positioned element, it will do nothing. However, there is one exception - flex children can use z-index even if they're non-positioned

Please look here: Stacking elements - CSS z-index and stacking context explained

Please prepare a working example and publish a link to it (maybe use jsfiddle or similar), so that we can see what is happen.