CODEWITHSUNDEEP
jquerycss
CaptSaltyJack
CaptSaltyJack

Reputation: 16085

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 must be simple, but I'm just not seeing it.

Upvotes: 1

Views: 414

Answers (4)

Dutchie432
Dutchie432

Reputation: 29170

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

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

Upvotes: 0

Felix
Felix

Reputation: 89626

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

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

Upvotes: 1

Damp
Damp

Reputation: 3348

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

Upvotes: 3

Justin Niessner
Justin Niessner

Reputation: 245509

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;
}

Upvotes: 9

Related Questions