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

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.

Answer 2

CSS absolute positioning is always done "relative" to the most recent ancestor that has a "position: relative", otherwise it uses the body tag by default. If the CSS you included is all that affects those divs, then your .content div will be positioned relative to the .main div, but your .bgImage will be positioned based on the tag.

If you want both .content and .bgImage to move in lockstep, then you'll need to add a "position: relative" to div.main.

Answer 3

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 4

I see no need for "z-index"es or "position: absolute" in your code at all -- unless you have other complications that you have not revealed to us.

To center the background on the DIV class="main":

body{margin:0;padding:20px 0;}
.main{background:transparent url(bg1.jpg) no-repeat center top;}
.content{border:#000 thin solid;width:960px;margin-left:auto;margin-right:auto;background-color:#000;opacity: 0.5;filter:alpha(opacity=50);-moz-opacity: 0.5;}

The "center top" places the center-top of the background image on the center-top of the element it's applied to. You may want to apply a

min-width:1024px;_width:1024px;

to the same element -- to prevent a narrower window from hiding the edges (this will change how the element is rendered if the "viewport" is narrower than the background's dimensions).

The only thing your pre-modified code it can do that my modified code can't:

• Crop the background image (if it is not natively 1024px x 768px) by using the css "width" and "height" properties
• If the class="main" element already has a background image set, most browsers don't support the CSS3 required to stack multiple backgrounds on the same element

Some of what was stated about "z-indexing" and the "position" property above was correct but failed to mention: you've taken your class="content" element out of "the flow". The ancestor elements won't grow when the content of class="content" element grows. This is an important and fundamental difference between "z-index"ed elements and elements that remain "in the flow".

Other side notes:

• elements with the same z-index are stacked according to their order in the HTML (later in the HTML means they are drawn above on the screen)
• "z-index"ing requires "position: (absolute|relative)", "z-index: (valid value)", and IIRC "(top|left|bottom|right): (valid value)" to take the element "out of the flow"