Why am I having problem with z-index? 1

[southbeach]

I am trying to use two layers to do something I've done before but today, it does not want to work for me. The objective is to use a layer to block/dim-out page and use the second layer to obtain user input.

Here is the code (CSS):

.blockScreen {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 20;
	display: none;
/*	background:url(../images/mag_sep.gif); 
	background-repeat: repeat-x;  */
	background-color: #CCC;
	filter: alpha(opacity = 55);
	opacity:.55;
}
div#trxCommentView {
	z-index: 30; 
	width: 45%; 
	padding: 6px; 
	margin-left: auto; 
	margin-right: auto; 
	border: 1px solid black; 
	display: none;
}

The two layers are:

<div id="blockScreen" class="blockScreen">&nbsp;</div>
<div id="trxCommentView" style="background-color: <? echo $_SESSION['page_background_color']; ?>;">
	<table width="100%" border="0" cellpadding="0" cellspacing="0">
		<tr>
			<th>CHARGE COMMENTS ENTRY</th>
		</tr>
		<tr>
			<td align="center">
				<textarea name="trxcomm" id="trxcomm" rows="8" cols="60" class="normal">&nbsp;</textarea>
			</td>
		</tr>
		<tr>
			<td align="center">
				<input name="savcomm" id="savcommID" type="submit" value="Save&nbsp;&amp;&nbsp;Close" class="submit" />&nbsp;&nbsp;&nbsp;&nbsp;
				<input name="clocomm" id="closcommID" type="button" value="Abort&nbsp;&amp;&nbsp;Close" class="submit" onclick="document.getElementById('trxCommentView').display='none';" />&nbsp;&nbsp;&nbsp;&nbsp;
				<input name="rescomm" id="rescommID" type="reset" value="Reset" class="submit" />&nbsp;&nbsp;&nbsp;&nbsp;
			</td>
		</tr>
	</table>
</div>

The JS looks like this:

	function trxComments(s) {
		var s_array = s.split("~");
		var ccid	= s_array[0]; var ccsysid	= s_array[1]; var ccode	= s_array[2];
		var ccgl	= s_array[3]; var ccdesc	= s_array[4]; var ccqty	= s_array[5];
		var ccper	= s_array[6]; var ccext		= s_array[7];
		document.getElementById('trxCommentView').style.display='block';
		document.getElementById('blockScreen').style.display='block';
	}

Both layers are just before my closing the BODY tag

After looking at this few lines of code all day I think it is time to have some one else look at it and hopefully spot whatever I'm missing here.

Thank you all in advance!



--
SouthBeach
The good thing about not knowing is the opportunity to learn - Yours truly, 2008.

 

[southbeach]

Oh, I forgot to mention that the problem I am having is that the blockscreen layer appears on top regardless of the z-index order; I cannot edit the textarea field.


--
SouthBeach
The good thing about not knowing is the opportunity to learn - Yours truly, 2008.

 

[Vragabond]

z-index value is ignored on non-positioned items. Give your second div relative positioning and that should clear things up.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[southbeach]

Nice, that fixed it!

Thank you so very much ... I wonder if I had it to work before by accident because I certainly did no know this.


--
SouthBeach
The good thing about not knowing is the opportunity to learn - Yours truly, 2008.