iframe preventing z-index from working?

Question

I've been trying to use the z-index css attribute to make one element always be in front of another, but it isn't working. The z-index of one element is clearly greater than that of the other, but it is still positioned behind the other element. Could it be because one of the elements (the one showing up in front) is an iframe? Does anyone have any other advice?

Answer 1

For those that arrive here later, the correct answer is to put position: relative; or any of the other position props on the problematic elements.

My recommendation would be to put this on every element involved with the problem:

position: relative;
z-index: 0;

and then increase the z-index on the back-most element(s) that are in front of the iframe.

If you do that, you will start winning pretty quick.

In my testing here, z-index only works if you have position explicitly set. Test it by modulating your z-index values and then trying to highlight the text on the screen via mouse-clicking. You should see evidence of layers acting either as desired or horribly incorrect.

I find it works great if you press F12 (to open dev pane, in Chrome) and then click the Inspect Button at the top-left or press CTRL + SHIFT + C. Then you can mouseover everything and see what their stacking context is relative to adjacent elements.

UX BONUS TIP: Remember, users may want to copy text, so make sure they can select it.

If you are having problems, most likely you are either:

1. missing position: relative; on an element's parent, or
2. missing z-index: 0; somewhere

Answer 2

Remember that the z-index index only counts on absolute elements. Both elements should has the position:absolute. More info in the CSS 2.1 Specification