Div on top of Div using z-index.
- by Iacks
I have the following divs in my HTML:
<div class="main">
<div class="bgimage"></div>
<div class="content">Text</div>
which is directly inside my body.
With the following CSS:
.content{filter:alpha(opacity=50);-moz-opacity: 0.5;opacity: 0.5;}
.content{position:relative;z-index:1;border:#000 thin solid;width:960px;margin-left:auto;margin-right:auto;background-color:#000;}
.bgimage{position:absolute;z-index:-1;width:1024px;height:768px;margin-left:auto;margin-right:auto;background-image:url(bg1.jpg);}
Basically, I have a Div that with a display of a background image, and I will have another Div on top of this with transparency. This current code works, but my problem is when I am trying to take the content div down from the top.
When I add margin-top:100px, for example, is also brings the image down. I thought it would not touch it if it is not on the same z-index? Why does adding a margin also force the bgimage div down?
I have also tried making the div with class of content a position of absolute and a zindex, but then this won't centre. How should I solve this?
