CSS - positioning different layers

[bjnst6]

Although i've been using css for some time now i've never dealt with the positioning of different layers. I have 8 layers that all pretty much look like the follwing two:

/*layer classes*/
.addContainer
{background: #cccccc;
color: black;
border: thin groove white;
top: 190px;
left: 265px;
width: 340px;
visibility: hidden;}

.editContainer
{background: #cccccc;
color: black;
border: thin groove white;
top: 190px;
left: 410px;
width: 340px;
visibility: hidden;}

they way my app is set up now clicking on various buttons at the top of the screen "shows" one of the 8 layers and "hides" the other seven. they are all positioned basically at the same place on the screen...right in the center. so it looks like one is appearing on top of another, etc. (but only one appears at a time). this was working fine when i had all layers position: absolute. however, that's no longer an option because when the user resizes his browser i want the layers to slide in the center (they're all centered now) no matter what the size of the browser.

upon changing the positioning from anything other than absolute, the layers all appear one underneath each other on the screen and i can't get them to simulate the "overlap" idea anymore. in other words...i can't have them all in the same place on the page.

i still need this to happen however, so my question is what positioning or css properties do i need to manipulate to make it so?

thanks!
bryan

[Waldo2k2]

in your html code, the position of the layers are determined by where they are in the code (this is a bare bones, no style sheets rule). However, if you place them in the order you wish in your html, and use {position:relative; top:20px;left:20px;} in your css, you can offset each one an exact amount from the other. And resizing the browser won't affect their positions 'relative' from eachother.

[websmith99]

Users using Netscape 4.x will see their CSS break after re-sizing
the browser window. This is due to a well-known bug in the
browser. To overcome it, simply add this script to the page:


<script language="JavaScript">

NS4 = document.layers;

if (NS4) {
origWidth = innerWidth; origHeight = innerHeight;
}

function reDo() {
if (innerWidth != origWidth || innerHeight != origHeight)
location.reload();
}

if (NS4) onresize = reDo;

</script>