DHTML Layers Overlapping other HTML content

[irock]

I have implemented the script below to hide and show layers.
However, I found these layer will overlap the rest of page.
Do you know how to get around this problem? I want the table to go below either RED and BLUE layer.

Thanks!

<bunch of javascript code here>

<a href="javascript:showDiv('RED')">RED</a> ¦ <a href="javascript:showDiv('BLUE')">BLUE</a>

<div id="RED" style="position: absolute; width:560; height:450; background-color: #RED; visibility: hidden">

I'm Red.
</div>

<div id="BLUE" style="position: absolute; width:560; height:450; background-color: #BLUE;">

I'm Blue.
</div>

<table width=560 height=400><tr><td>
BLAH BLAH BLAH
BLAH BLAH BLAH
BLAH BLAH BLAH
BLAH BLAH BLAH
BLAH BLAH BLAH
BLAH BLAH BLAH
</td></tr></table>

[pageoneresults]

irock, have you tried using the z-index property?

9.9.1 Specifying the stack level: the 'z-index' property [w3.org]

[garann]

If you haven't got this solved already, you might get rid of the "position: absolute;" in your styles. That should cause the layers to stop overlapping other elements.

Did you have that position in there because you were getting a block of space the size of the layers above the table, even when they were invisible? If so, you might want to switch "visibility: hidden;" to "display: none;" - that'll prevent them from taking up space.. if that was even an issue.

[Reflection]

If you haven't got this solved already, you might get rid of the "position: absolute;" in your styles. That should cause the layers to stop overlapping other elements.

That might take care of the problem but you should also be aware that you will not want to do that if you use z-index, because the z-index property only affects positioned boxes.

Also since the divs arent being positioned 'absolutely' with a top or left value, you might want to change the positioning to relative and apply z-index properties to all your layers.

[BlobFisk]

Pssst.... Don't forget to tell the browser what units you are talking about!

;)