Search code examples
cssiframepositionfixedoverlap

Overlap a fixed-position iframe to the very top in CSS

I've inserted an iframe to appear in the bottom right corner of the page, and it's fixed in position. Everything is how I want it except that the iframe seems to be underneath (overlapped by) the other elements on the page, such as the paragraphs etc. How do I get the iframe to be above all the other elements so that users can actually use the iframe (which is simply a chatbox). I would still really like it to be in the bottom right corner in fixed position if possible. Thanks in advance! This is the code I have at the moment: 

<iframe src="www.stackoverflow.com" width="240" height="370" frameborder="0" scrolling="0" style="position: fixed; right: 10px; bottom: 10px"></iframe>
Solution

  • Apply z-index to iframe

    Like this

    <iframe src="www.stackoverflow.com" width="240" height="370" frameborder="0" scrolling="0" style="position: fixed; right: 10px; bottom: 10px; z-index:999;"></iframe>