Why is my iframe causing the rest of the page to go blank?

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.

Answer

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).