Member Avatar for jetru

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?

  • 5 Contributors
  • 8 Replies
  • 401 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by jetru

Dani AI

Generated

Brief summary and diagnosis: the desired effect (only part of div1 overlapping div2, with div1 visually on top) is a stacking/positioning issue. is right that DOM order matters; and were also correct to point at z-index and stacking contexts. Important clarification: z-index applies to any positioned element (position: relative, absolute or fixed), not only absolute. In IE (especially older IE6/7) stacking can be affected by "hasLayout" and by ancestor elements that create their own stacking context, so a z-index that looks correct in Firefox can be ignored in IE unless the elements share the same positioned ancestor.

Example pattern that keeps flow but lets one box partially overlap the other:

.wrapper { position: relative; }

.panel-bottom { position: relative; z-index: 1; }

.panel-top {
  position: relative;
  z-index: 2;         /* higher to appear above .panel-bottom */
  margin-top: -40px;  /* only 40px of .panel-top overlaps .panel-bottom */
  zoom: 1;            /* legacy IE hasLayout trigger (IE6/7) */
}

Troubleshooting checklist (common gotchas):

  • Make both divs siblings inside the same positioned container so they share a stacking context.
  • Remove unexpected z-index/position from ancestors; any ancestor with a z-index/position/transform/opacity can trap children.
  • For IE6 z-order problems, zoom:1 or setting an explicit width/height on the element often fixes hasLayout.
  • If native form controls (select) appear above layers in old IE, an iframe shim or hiding the control is required.
  • To avoid moving content, consider using a pseudo-element (::before/::after) on the top div to draw only the overlapping background.

Combining DOM order with correctly positioned siblings and the small IE fixes above normally resolves the issue.

Recommended Answers

All 8 Replies

Member Avatar for MidiMagic

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.

Member Avatar for jetru

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

Member Avatar for MidiMagic

What do these divs contain. Depending on the content, there may be other ways to do this.

Member Avatar for cashu

i had the same problem.
thanks
cashu

Member Avatar for cmills83

z-index property with positioning

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

Member Avatar for cmills83

then position with top:xxpx; left:xxpx; or right or bottom, etc.

Member Avatar for FC Jamison

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.

Member Avatar for jetru

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.