时间戳

首页 > 解决方案 > iframe：如何在所有其他 iframe 之上将带有导航菜单的特定 iframe 分层？

javascript - iframe：如何在所有其他 iframe 之上将带有导航菜单的特定 iframe 分层？

问题描述

我正在尝试对 iframe 进行分层，以便带有导航菜单的框架位于所有其他 iframe 之上。导航菜单是一个 CSS 下拉选项卡菜单导航。问题是当一个下拉菜单从一个悬停在它上面的类别中出现时，它会显示在显示内容的主 iframe (iframe_b) 后面。

<html>
<body bgcolor="black" text="red">
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
}

.navbar {
  overflow: hidden;
  background-color: #333;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 1px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 1px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: gray;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>
</head>
<body>

<div class="navbar" position:top;>
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div> 
</div>

</body>
</html>
<iframe height="30px" width="100%" src="menu.html" name="iframe_a" style="border:none;scrolling:no;"></iframe>
<iframe height="85%" width="100%" src="CONTENT_PANE" name="iframe_b" style="border:none;"></iframe>
<iframe height="40

我需要 iframe_a，该菜单位于所有其他框架的顶部，因此当有下拉菜单时，它会出现在 iframe_b 的内容之上。我该如何做到这一点？

15 多年前，我在另一个使用 z-index 构建的站点上做了我想做的事情，但我没有该站点的代码可供参考，我当然不记得我是如何做到的。据我依稀记得，做起来非常简单，它只是放在部分的正文标签中的一行 (z-index:something)。

我是该网站的新手，不熟悉如何格式化所有内容。片段的 HTML 窗格中的 HTML（小提琴？？）是“indext.html”。CSS 窗格中的内容是 iframe_a 导航菜单的示例。

标签： javascripthtmlcssiframe

解决方案

您需要将样式应用于特定iframe，因为来自的样式表index.html无法格式化 iframe内容，例如来自其中一个的下拉菜单iframe。将z-index“顶部” iframe（我想是下拉菜单）的值设置为某个大数字，例如 999 和其他一些较小iframe的数字

例子：

<iframe height="30px" width="100%" src="menu.html" name="iframe_a" style="border:none;scrolling:no; z-index:999;"></iframe>
<iframe height="85%" width="100%" src="CONTENT_PANE" name="iframe_b" style="border:none; z-index:10;"></iframe>```

推荐阅读