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?

Viewfinder

have you positioned the iframe? – Rennin

No, but the other element has absolute position. – Viewfinder

you must position the element that you want to put a z-index on. Even position:relative would do. – Rennin

thank you, but that actually didn't do anything. – Viewfinder

Then you are doing something wrong, post up some code :) – Rennin

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

Cistaceous

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

Aubyn

They can be positioned relatively, absolutely, inherit. It doesnt matter. Just so long as they have a position :) – Rennin

Yes, I think that all position works except position:static, which is the default if you don't change it (so position inherit won't work sometimes) – Aubyn

Answer 3

To fix the issue, wrap your iframe in a container and apply CSS position to it (relative, absolute, fixed) with a z-index of 0. For instance, I faced a problem where my dropdown menu was hidden behind the iframe content. By wrapping the iframe in a container and setting its z-index to zero, the problem was resolved. Check the example image where the entire page comes from the iframe except for the header and dropdown menu. enter image description here

<div style="position: fixed; z-index: 0;">
  <iframe title="iframe" src=" https://social.jato-live.com/members " id="iFrameResizer1" scrolling="yes" style="min-height: 90vh; min-width: 100%; overflow: auto;"></iframe>
</div>

Magnusson