Question

我有一个简单的问题，但我刚开始学习HTML / CSS。我想在全屏幕上显示一个iframe，我可以这样做，但我也希望在它上面显示我的导航菜单。

我的HTML看起来像这样：

<body>
     <nav>
         (menu items)
     </nav>
     <iframe src="http://xx.xx.xx.xx/" style="border: 0; width: 100%; height: 100%; display: block; position: absolute; left: 0px; top: 0px;"/>
</body>

问题是我只能在加载iframe之前看到导航菜单，然后它会在iframe下方消失。

我怎么能在顶部显示它？（像这样：http://puu.sh/kK6Eu/e55531777f.png）

感谢。（对不起我的英语，我是法国人）

Answer 1

您需要在其CSS属性中更改nav元素的Z-index。较高的Z指数意味着较高的元素

nav{
   z-index: 2
}

iframe{
   z-index: 1
}

Answer 2

使用以下代码

<body>
     <nav style="position: relative; z-index: 2;">
         Hello
     </nav>
     <iframe src="http://xx.xx.xx.xx" style="border: 0; width: 100%; height: 100%; display: block; position: absolute; left: 0px; top: 0px;"/>
</body>

在iframe上显示导航

2 个答案: