CSS-issue- have div elements fade-in/fade-out on same spot on page, w/o absolute positioning
So we're trying to make something a bit like the front of mint.com: rollover navigation at the bottom to nicely fade in stuff in the middle section. I'd like one elment to be fading in while another is fading out -- so that means I want the divs to be in the same area. I thought i'd try changing the z-index, but I still have the earlier divs pushing their sibling divs down...
so the following (showing all 4 at once, but I'm assuming if any 2 are visible at the same tiome, I'd having the "pushing" problem has the 4 divs in different z-planes, but they're still pushing eachother around. How can I avoid that, without making each of the nailed into place via absolute positioning??
<head>
<style>
.promospace {
width:300px;
height:250px;
}
.promo {
background-color:ccccff;
width:300px;
height:250px;
}
.zindex1 {z-index: 1;}
.zindex2 {z-index: 2;}
.zindex3 {z-index: 3;}
.zindex4 {z-index: 4;}
</style>
</head>
<body>
<div class="promospace">
<div class="promo zindex1" id="catpromo1"><h2>catpromo1</h2></div>
<div class="promo zindex2" id="catpromo2"><h2>catpromo2</h2></div>
<div class="promo zindex3" id="catpromo3"><h2>catpromo3</h2></div>
<div class="promo zindex4" id="catpromo4"><h2>catpromo4</h2></div>
</div>
</body>