One of my DIV's is always on top - html

Question

I'm trying to layer 2 div's so that the content of one is above another, and the other has an opacity setting to make it translucent. However, no matter which way around I put the HTML for the layers the translucent layer is always above the content. This is the way I would assume to be correct in HTML ordering:
<div id="translucent"></div>
<div id="content">...</div>
However it doesn't seem to be working - The basic styling I'm using to overlap the layers is here - This works to put one over the other, but the translucent one seems to stay above the other one
<style>
#content
{
margin-top:-525px;
}
#translucent
{
height:525px;
opacity:0.8;
}
</style>
Any Ideas?

Answer 1

Why don't you use position and z-indexes? It should work like this:
#content {
margin-top:-525px;
// positioning something allows you to do more accurate placements
position: relative;
// adding a z-index allows you to play with the layers (because... z-axis.)
z-index: 1;
}
#translucent {
height:525px;
opacity:0.8;
position: relative;
z-index: 0;
}
Basically, the HTML DOM works as following: if it's later in the DOM, it is on top of items earlier in the DOM. Turning the opacity down makes the element transparent, but not non-existent. The best way to do this is add z-index and a position, or just use display: block; and display: none; To hide one of yours DIVs (but you want the transparency, so I guess thats not an option).
However if you'd use position: absolute; you could place the elements in the same place without doing the margin. Then wrap it in another element (say #wrapper) and then you can move both boxes at the same time. Add a width and height of 100% for both boxes and you can use the wrapper to define both boxes' height and width and the same time! Ahh. CSS Magic.
<div id="wrapper">
<div id="content">...</div>
<div id="translucent"></div>
</div>
Heres the CSS:
#wrapper {
position: relative;
}
#content {
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
#translucent {
height:525px;
opacity:0.8;
position: absolute;
left: 0;
top: 0;
z-index: 0;
}