html - z-index and stacking; removing a child from stacking context -
i'm trying tweak stacking order of elements; here's sscce.
given html snippet:
<div id="block1"> <div>lorem ipsum dolor.</div> <div id="widget"> <div>widgety goodness!</div> </div> </div> <div id="block2"> <div>lorem ipsum dolor.</div> </div> <div id="block3"> <div>lorem ipsum dolor.</div> </div> i'm trying display #widget on top of #block2; following css, you'll see problematic without changing location of #widget in node tree.
#block1, #block2, #block3 { position: relative; min-height: 50px; width: 100%; } #block1, #block3 { background-color: #abc; color: #123; z-index: 1; } #block2 { background-color: #def; color: #456; z-index: 2; } #widget { background-color: #f00; position: absolute; z-index: 999; left: 200px; top: 40px; } as can see in fiddle, #widget overlapped partially #block2; makes perfect sense parent #block1 lower among siblings in stacking order.
the obvious answer is: make #widget child of #block2, unfortunately that's not solution here. additionally, #blockn elements cannot have relative z-index values modified; blocks 1 , 3 must lower 2. (by mean calculated values different, #block2 greater it's siblings). reason this, box-shadow layering.
is there reasonable (read: cross-browser, ie7+) way remove #widget it's stacking context, while retaining it's position, coordinate location, dimensions, etc.?
using fixed positioning removes desired, obtains visual properties of being fixed (which makes non-solution)
i reckon may have been answered in roundabout way, didn't find it. also, apologies; appears may have missed innocuous key details in initial post. think i've covered them now.
your rules aren't applying elements want them applied to. need explicitly set z-index on elements want position, in case element div child of block2. modifying first selector from:
#block1, #block2 , #block3 { to
#block1, #block2 div, #block3 { your stacking order corrected. z-index rules being applied parents while children continued use default of auto. in case, setting position on #block2 div, allow widget sit on top of block2 child div.
