You need to make a new element inside the div, with absolute positioning and height and width of 100%, then give that element the box shadow. div { height: 300px; color: red; position: relative; } div > div { box-shadow: inset 0 0 10px black; position: absolute; pointer-events: none; top: 0; left: 0; width: 100%; … 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.
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