iframe 内容与 iframe 的边界重叠答案

【问题标题】：iframe content overlapping the iframe’s boundariesiframe 内容与 iframe 的边界重叠
【发布时间】：2018-06-24 15:55:49
【问题描述】：

我有一个具有特定高度的header。在其中，我想放置/加载一个包含下拉菜单的外部 html 文件。

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

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

问题在于，下拉项目不会越过iframe 本身或标题（肯定是因为header 和iframe 边界本身的特定高度）。

我已经尝试在z-index 中为 iframe 和外部菜单文件本身使用大数字，但没有结果。我也尝试过embed 和object。

iframe 内容可能会与 iframe 的边界重叠。如果是这样，是否可以仅使用 HTML/CSS 来完成？

【问题讨论】：

标签： html css object iframe embed

【解决方案1】：

在使用 z-index 之前，您是否使用了 CSS Position。因为如果不是，那么它就不能真正起作用，因为它需要 CSS 位置。

有关 CSS 位置的更多信息，您可以查看此链接。 https://www.w3schools.com/cssref/pr_class_position.asp

【讨论】：

我到底应该如何使用position？
例如。 iframe {位置：相对； z-index：1； }