Ok, this is dumb: overlays and z-indexes

I was just screwing around, and actually wrote this jQuery code I expected to totally work, but it doesn't! Have a look:

http://jsfiddle.net/csaltyj/GxCFp/

Why on earth isn't the "destroy" div above the overlay?! It mu开发者_JAVA百科st be simple, but I'm just not seeing it.

z-index only works on positioned elements. Since you button isn't positioned via CSS, z-index has no effect. You can easily fix this by changing your definition of #destroy to:

#destroy {
    z-index: 9001;
    position: relative;
}

It is actually not that simple... It has to do with stacking contexts https://developer.mozilla.org/en/Understanding_CSS_z-index/The_stacking_context

Adding 'position:relative;' to #destroy will make it work as intended

Fix'd: http://jsfiddle.net/GxCFp/12/

z-index only applies to other-than-static positioned elements.

Why would yo take this route, out of curiosity, rather than including the destroy button in the div itself?

http://jsfiddle.net/GxCFp/18/