CSS - Prevent popup from getting hidden behind other elements on page

Question

A have a popup div. But on popup it is getting hidden behind other elements on the page. How can I ensure that the popup div always stays on top of other elements on page?

Corruptible

is this a issue on all browsers? – Paraphrastic

@Saumitra post some code , it would be helpful. – Oily

Answer 1

Make sure the css z-index is higher than the others.

(Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed)

Macur

i have not set the z-index of other elements, so what value should I use for z-index of popup div . – Corruptible

@Saumitra Try setting the z-index of the popup element anyway. (Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed). – Macur

for a comprehensive look at it: coding.smashingmagazine.com/2009/09/15/… – Macur

thanks...that's exactly what I wanted...accepting answer in 9 minutes :) – Corruptible

@Macur +1 for raising that point , people only use z-index without positioning the element. – Oily

Also note, some elements (like videos) will always render on top in some cases. You might need to hide these elements first. Also, IE7 has a different way of thinking about z-index which can cause problems. – Sway

Answer 2

To make your popup appear over another element you should make sure that z-index property for the front element must be greater than the one which should get behind

//this id element will get at front
#front {
    z-index:2;
}
//this id element will be behind #front element
#back {
    z-index:1;
}

Hollandia