how to put an iframe absolutely on top without con

Question

so I have an iframe:

<iframe style="width:100%;height:45px;position:fixed;top:0px;left:0px;z-index:2147483649" src="etc" scrolling="no" frameborder="0px"></iframe>

but then this iframe would conceal the top portion of the body contents since this iframe will be over the body contents....is there a way to configure this iframe with html, javascript, etc so that it wouldn't conceal the body anymore (no dirty jokes plz)

EDIT

also I'm trying to get it to not scroll down and will always be absolutely on the top of the page even when the user scrolls the page down...but doing so without covering the body contents...think of a toolbar

Answer 1

Wrap your body content within a DIV and position it under the iframe.

<iframe style="height:45px;position:absolute;top:0px;left:0px;" src="etc" scrolling="no" frameborder="0px"></iframe>

<div style='position:absolute;left:0;right:0;top:45px;bottom:0;overflow:auto;'>Your body content</div>

Answer 2

i think changing the css position to relative will do that

 <iframe style="width:100%;height:45px;position:relative;top:0px;left:0px;z-index:2147483649" src="etc" scrolling="no" frameborder="0px"></iframe>

check the working code @here

so you want the fixed iframe that will always reside at top. For that you need to set the margin-top to body. the margin will be greater than the height of the iframe. see the updated fiddle @here

Answer 3

not sure what you are trying to do necessarily but if you change 'position' to 'static' and stop trying to position it absolute, then local elements will flow under it ..

otherwise you need to add some margin above what you don't want concealed