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?
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...
What do these divs contain. Depending on the content, there may be other ways to do this.
z-index property with positioning
divname { position:absolute; z-index:1; }
divname2 { position:absolute; z-index:2; }
probably in a container div
then position with top:xxpx; left:xxpx; or right or bottom, etc.
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!
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.