positioning one layer on top of another

[camokat]

Hello,

I have a two layers that I want to place one on top of another, one layer is visible and the other is not. During loading the visiblity of layers is reversed:


<div id="buttonsWaitLayer" style="position:relative;
width:100%;
height:30px;
left: 0px;
top: 0px;
z-index: 4;
visibility:hidden"
class="wait_buttons">
Please wait, performing your request...
</div>
<div id="buttonsLayer" style="position:relative;
width:100%;
height:30px;
left: 0px;
top: 0px;
z-index: 3;
visibility:visible"
class="wait">
<jsp:include page='<%= buttonDirective %>' flush="true"/>
</div>


But here instead of two layers being one on top of another, I have buttonsWaitLayer NORTH and buttonsLayer SOUTH. What am I doing wrong?

thanks,
camokat

[BonRouge]

You might want to use 'position:absolute;' for one or both of them.

[togaen]

You could also use the display property instead of the visibility. If you just set the visibility to hidden, then the DIV is still there taking up space- you just can't see it. On the other hand, if you set display to none, then it's removed from the document and the other DIV will be where it's supposed to be.