[SOLUTION] Elements over lightbox - Absolute/Rel elements hover over lightbox

Written By
PHPin24  
Submitted At
2010-04-22 14:14:21  
Num Views
968  
Category
Javascript  
Basically I had this problem whereby my lightbox was showing up but it seemed like elements was "shining through". The dark background was just not covering them. This also occurs sometimes in flash.

I figured that there's a CSS property and my problem was that my Z-Index was not set correctly. Z-Index is basically the layer ordering of your CSS.

Here is how you can change the z-index fixing the lightbox issue I have been having.

#myElement{
position:relative;
z-index:90;
}


If items are hovering or showing above each other you can use the Z-Index to set which shows above which elements.

It was quite easy then to fix the problem as I could see in firebug that the default Z-Index for TB_overlay (Thickbox / Lightbox element) was 100.

So my Lightbox Transparent grey background was showing in the following order:

Z-Index order before:
1. Normal Site Stuff
100. Grey background
103. Lightbox / Thickbox
999. My element showing above the lightbox

So as you can see. If 1 is at the bottom you need to understand that it would show first. Then piled onto that would be the lightbox transparent grey background, then the lightbox and then this random element.

So in order to fix it I just changed My element to have a Z-Index of 90 which put my layering (if you can call it that) in the right order.

Z-Index order after:
1. Normal Site Stuff
90. My element showing above the lightbox
100. Grey background
103. Lightbox / Thickbox

No my element sits just above the normal site stuff and under my lightbox. Exactly how I want it.

I hope this helps someone else, as this kept me busy for a while.


By PHPin24 @ 2010-04-22 14:14:21