One or more of the following scenarios will cause an element to establish its own stacking context1 for its descendants: The root element always holds a root stacking context. This is why you can start arranging elements without having to position the root element first. Any element that doesn’t already participate in a local stacking … Read more
Just realized what’s going on. I had the navbar inside a header which was position: fixed; Changed the z-index on the header and it’s working now – guess I didn’t look high enough up the containers to set the z-index initially !#@!? Thanks.
Never fails, once I post the question to SO, I get some enlightening “aha” moment and figure it out. The solution: .container { border: 1px solid #DDDDDD; width: 200px; height: 200px; position: relative; } .tag { float: left; position: absolute; left: 0px; top: 0px; z-index: 1000; background-color: #92AD40; padding: 5px; color: #FFFFFF; font-weight: bold; } … Read more
You need to define positioning for #primaryNav. Z-index only affects positioned elements. I just added this in firebug and it fixed: #primaryNav { position: relative; } I would avoid using a negative z-index. Simply change z-index of #page to 0.
Just move the entire modal outside of the rest of your code, to the very bottom. It doesn’t need to be nested in any other element, other than the body. <body> <!– All other HTML –> <div> … </div> <!– Modal –> <div class=”modal fade” id=”myModal”> … </div> </body> Demo They hint at this solution … Read more
Stealing some code from abcoder site for the sake of clarity: var maxZ = Math.max.apply(null, $.map($(‘body *’), function(e,n) { if ($(e).css(‘position’) != ‘static’) return parseInt($(e).css(‘z-index’)) || 1; }));
If you use Chrome https://github.com/gwwar/z-context is a simple extension to see: If the current element creates a stacking context, and why What its parent stacking context is The z-index value and important, like aprohl5 said: The z-index property can affect the stack order only if the position is explicitly set to fixed, absolute, or relative. … Read more
Set a negative z-index for the child, and remove the one set on the parent. .parent { position: relative; width: 350px; height: 150px; background: red; border: solid 1px #000; } .parent2 { position: relative; width: 350px; height: 40px; background: red; border: solid 1px #000; } .child { position: relative; background-color: blue; height: 200px; } .wrapper … Read more
You want to use absolute positioning. An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is html For instance : .yourDiv{ position:absolute; top: 123px; } To get it to work, the parent needs to be relative … Read more
Here’s my attempt: http://jsfiddle.net/Kx2k5/1/ (successfully tested on Fx27, Ch33, IE9, Sf5.1.10 and Op19) CSS .item { /* include borders on width and height */ -webkit-box-sizing : border-box; -moz-box-sizing : border-box; box-sizing : border-box; … } .i1:after { content: “”; /* overlap a circle over circle #1 */ position : absolute; z-index : 1; top : … Read more