I have two divs which both have backgrounds in my CSS properties.

Unfortunately, div2's background overlaps div1's background. But I want it the other way around. In other words, I want div1's background over div2's. I've tried z-index but it didn't work. How do i solve this?

10 Years
Discussion Span
Last Post by jetru

You must render the div you want on top last. This means that the div to be on top must be inside the other div in the HTML file.

HTML is not normally supposed to place objects on top of each other. Objects are normally supposed to have their own places on the page without overlap.


But I would like only a part of the div to overlap the other div...not the whole thing...


z-index property with positioning

divname { position:absolute; z-index:1; }
divname2 { position:absolute; z-index:2; }
probably in a container div


By default, elements that are formatted later in an HTML document are stacked on top of earlier elements. In addition, elements placed with CSS positioning are stacked on top of elements that are not. To specify a different stacking order, use the style

z-index: value

where value is a positive or negative integer, or the keyword "auto". Objects are stacked based on their z-index values, with the highest z-index values placed on top.

The z-index style only works for elements that are placed with absolute positioning. Also, an element's z-index value determines its position relative only to other elements that share a common parent.

So a container div enveloping the other two divs is required.

I hope that helps...stacking objects can get tricky sometimes.


All these work just fine in firefox. IE just refuses to accept any of these! I tried everything!

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.