Div on top of Div using z-index

Question

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:

body {
    margin: 0;
    padding: 20px 0;
}
.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?

Answer 1

your CSS should be

.bgimage { position: relative; }

.content { position: absolute; }

so the .content will be positioned relative to the .bgimage your current CSS makes the .bgimage position relative to the document.

see this link on CSS positioning

Answer 2

z-index has no relation to positioning: it only affects the rendering order of your elements. Position: relative tells the browser to render the element at the place it should be, and offset it by eventual left, right, top or bottom coordinates. Therefore, margins, paddings, etc. still affect it.

Only position: absolute guarantees position independance.