I’m trying to make an iframe that embeds on any web page where it only shows up as a button on the bottom right of a webpage and when clicked open an about 100px by 100px box that is also embeded on the web page in the bottom right corner. The issue is that every time I put the iframe on the page, the middle of the page where their was content before goes blank. Here is the code for the iframe:
<iframe src="ka.html" title="KA" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"> </iframe>
I’ve tried editing the style but I’m not sure that the style is the problem. The iframe uses an html file and js code. I could use some help in figuring out where the problem is coming from and how I can fix it. I really appreciate any help I can get.
The style is the cause, if I’ve understood your description of the problem.
The combination of
position: absolute and zero for top/left/bottom/right will cause the iFrame to cover the first ancestor element that has
position: relative (or the body element if there is none).