CSS pop-up <div> window

Hi! I am putting together a simple true/false quiz. When the user clicks on true, a widow opens up letting them know if they are correct or not. I am using mostly CSS and JS to accomplish this. The window pops-up great for the 1st question, but is hidden behind the text on the page for the other 7 questions.

I think it has something to do with the z-index, but I can’t figure out what. I have tried changing the z-index and the position for the disclaimerMid class and multiple different scenarios with no success. I am going to paste the URL for the quiz and the relevant code below. Any help would be greatly appreciated!

I have validated the page: [URL=”http://www.aahanet.org/petsmatter/petsmatter_rabiesquiz.htm”]http://www.aahanet.org/petsmatter/petsmatter_rabiesquiz.htm[/URL]

HTML Code DIV for Question 2:

[code=html]<div class=”disclaimerMid”>
<h3><ol start=”2″><li>All animals can get rabies.</li></ol></h3>
<div class=”disclaimer_bottomLinks” id=”dis”>
<a href=”#” onclick=”areaBox_rollOver(‘trueBoxPuWindow2’); return false;”> True </a> |
<a href=”#” onclick=”areaBox_rollOver(‘falseBoxPuWindow2’); return false;”> False </a>
</div>
<!– START Hidden box for True Answer popup –>
<div id=”trueBoxPuWindow2″ class=”disclaimer_popupHidden”>
<div class=”disclaimer_PopupClose”>
<a href=”#” onclick=”areaBox_closePopup(‘trueBoxPuWindow2’); return false;”>Close</a>
</div>
<div class=”disclaimerBox_PopupContent”>
<h2>Please Try Again.</h2>
</div>
</div>
<!– END Hidden box for True Answer popup –>
<!– START Hidden box for False popup –>
<div id=”falseBoxPuWindow2″ class=”disclaimer_popupHidden”>
<div class=”disclaimer_PopupClose”><a href=”#” onclick=”areaBox_closePopup(‘falseBoxPuWindow2’); return false;”>Close</a>
</div>
<div class=”disclaimerBox_PopupContent”>
<h2>False!<br /><span class=”parText”>Only mammals get rabies. Snakes (reptiles), amphibians (frogs) and birds do not get rabies.</span></h2>
</div>
</div>
<!– END Hidden box for False popup –>
</div>[/code]

CSS code for that section:

[code=html].disclaimerMid {
position:relative;
background:#fff;
font:normal 12px Arial, Helvetica, sans-serif;
z-index:10;
}
.disclaimerMid .disclaimerBox_popupVisible {
position:absolute;
top: 50px;
left:35px;
display: block;
background: #fff;
border-bottom: 2px inset #105ca8;
border-left:1px solid #105ca8;
border-top:1px solid #105ca8;
border-right:1px solid #105ca8;
width: 350px;
z-index:30;
padding:10px;
}
.disclaimerMid .disclaimerBox_PopupContent {
width: 350px;
height: 150px;
overflow: auto;
background: #fff;
padding-right:5px;
}
.disclaimerMid .disclaimer_PopupClose {
font-size: 12px;
text-align: right;
width: 350px;
border-bottom:solid 1px #bcbcbc;
padding-top:5px;
}

disclaimer_bottomLinks {
clear:both;
}
#dis {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#a31a1a;
padding-bottom:40px;
padding-left:40px;
}
.disclaimer_popupHidden {
display:none;
}
[/code]

Thanks again for any help/tips on better CSS code. I am constantly learning ways to improve.

Also in #CSS _↴