CODEWITHSUNDEEP
htmlcssobjectiframeembed
VorganHaze
VorganHaze

Reputation: 2056

iframe content overlapping the iframe’s boundaries

I have a header with a specific height. Inside it, I want to place/load an external html file containing a drop-down menu.

<head>
    <style>
        header {
            height: 30px;
        }
    </style>
</head>

<body>
    <header>
        <iframe src="dropDownMenu.html"></iframe>
    </header>
    <main>[...]</main>
    <footer>[...]</footer>
</body>

The problem is that the dropped-down items don’t go over the iframe itself nor the header (definitely because of the specific height in the header and the iframe boundary itself).

I have tried with big numbers in the z-index for both the iframe and the external menu file itself with no result. I also have tried with embed and object as well.

It is posible for an iframe content to overlap the iframe’s boundaries. And if so, can it be done using only HTML/CSS?

Upvotes: 0

Views: 1633

Answers (1)

louierosero
louierosero

Reputation: 58

Did you used CSS Position before you use the z-index. Because if not, then is not really working since it required the CSS Position.

For more info about the CSS Position, you can check this link. https://www.w3schools.com/cssref/pr_class_position.asp

Upvotes: 2

Related Questions