CODEWITHSUNDEEP
cssiframepositionfixedoverlap
user3126991
user3126991

Reputation: 3

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>

Upvotes: 0

Views: 7126

Answers (2)

Prasanth K C
Prasanth K C

Reputation: 7332

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>

Upvotes: 1

Mr_Pouet
Mr_Pouet

Reputation: 4280

What about position:absolute ? (Make sure that you declare your iframe code after any potential element that could overlap).

Also, maybe we use some code of your to help you (use something like http://jsfiddle.net)

Upvotes: 0

Related Questions