CSS Position Absolute Z-Index Issue

Question

I have a form that uses a div that is positions over some input elements. For some reason, those input elements are above the positioned div, even though the div has a high z-index. Really not sure why this is happening, as the input fields don't even use absolute positioning, so I would think they would never be on top of another element.

Example (Click into Person, Status or Residence field): http://www.puc.edu/puc-life/funnybook/little-black-funnybook

Answer 1

It looks like you don't even need to set a high stacking order for the .item .answer selector, at least in the Gecko engine. Try removing the position and z-index and see if it's consistent x-browser?

Edit: Ah I forgot I had applied position:relative to the div.item element, can you try toggling that when it shows up and unset it when you hide it?

That or leave position:relative on all div.items through external CSS and toggle the z-index to be '2' when the stuff pops ups and back to auto when it's hidden.

Answer 2

z-index is the solution but it does not work proper with youtube movie iframe, for that you would have to use wmode='transparent'