HTML div needs to be on top of all other controls - html

Question

Some controls on the parent screen are bleeding through the div (see image). I need this div to be on top of all other controls. Right now the radio button list and the tabs are somehow on top.
Here is the declaration of the dialog box:
<div id="divSaveAnalysis" style="display: block; opacity: 100; width: 350px; font-size: 40px; position: absolute; top: 35px; left: 100px; background-color: rgb(247, 219, 111); padding: 15px; border: 1px solid #000;">
<div id="saving" style="font-size:medium; font-weight:bold;">
<span id="savingSpan" style="font-size: xx-large">Saving Analysis...</span>
<img src="css/images/Indicators/Activity/GearGreen_66x66.gif" style="float: right; height: 80px;"
title="Saving FLSA Analysis" alt="Saving..." />
<br />
<br />
<div><span id="savingReport" style="font-size: small;"></span></div>
<div><span id="savingInputs" style="font-size: small;"></span></div>
<div><span id="savingResults" style="font-size: small;"></span></div>
<div><span id="savingComplete" style="font-size: small;"></span></div>
</div>
</div>
The computed styles for the div are:
background-color: rgb(247, 219, 111);
border-bottom-color: rgb(0, 0, 0);
border-bottom-style: solid;
border-bottom-width: 0.9090908765792847px;
border-left-color: rgb(0, 0, 0);
border-left-style: solid;
border-left-width: 0.9090908765792847px;
border-right-color: rgb(0, 0, 0);
border-right-style: solid;
border-right-width: 0.9090908765792847px;
border-top-color: rgb(0, 0, 0);
border-top-style: solid;
border-top-width: 0.9090908765792847px;
color: rgb(51, 51, 51);
display: none;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 40px;
height: auto;
left: 100px;
line-height: 17.99715805053711px;
opacity: 1;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
padding-top: 15px;
position: absolute;
text-align: left;
top: 35px;
visibility: visible;
width: 350px;

Answer 1

You can use z-index to change the way the contact stacks. By default it's based of the order the content loads with the page.
By default z-index is 'auto'. Try setting it to an integer like 100.
z-index:100;
position:absolute;
When you use z-index you have to also change the position value for the content.
You can read more about z-index here http://www.w3.org/TR/CSS2/visuren.html#z-index

Answer 2

Setting the z-index will control the stacked order of elements.
#divSaveAnalysis {
z-index:10000;
}

Answer 3

you need to add property of
z-index:99999;
and make sure to add
position: relative;
for the z-index to work.