Question

我已经彻底搜索了这个答案，但我在这里找到的答案似乎对我不起作用......

我有一个下拉菜单，该菜单被包含iframe的表隐藏。我已经包含了以下代码。

如何在包含iframe？

的表格顶部显示菜单

我尝试过z-index解决方案但它们没有用。我也试过wmode =＆＃34; transport＆＃34;在iframe标记内，这不起作用。

菜单

CSS：

div.crm_menu {
width: 100%;
margin: 0 auto;
}

ul {
font: bold 14px Verdana ;
text-align: left;
display: inline;
margin: 0;
padding: 5px 4px 5px 0;
position: absolute;
top : 120px;
list-style: none;
float: left;
}
ul li {
font: bold 14px/18px Verdana ;
display: inline;
margin-right: auto;
position: relative;
padding: 15px 20px;
background: #a4b8c3;
cursor: pointer;
color: black;
text-decoration: none;
}
ul li:hover {
background: #1d4f6a;
color: white;
}
ul li ul {
padding: 0;
margin: 0;
position: absolute;
top: 47px;
left: 0;
width: 250px;
box-shadow: none;
display: none;
opacity: 0;
visibility: visible;
float: left;
}
ul li ul li {
background: #1d4f6a;
width: 250px;
display: inline-block;
color: black;
text-decoration: none;
}
ul li ul li:hover { 
background: #93a5af;
color: black;
}
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}

包含iframe的表格的HTML：

<table border="0" height="700" width="100%">`

<tr>

<td>

<iframe src="http://www.idissys.com/download/it_blog.pdf?wmode=transparent" height="700" width="100%" wmode="transparent" style="overflow:scroll;"></iframe>

</td>
</tr>

</table>

Answer 1

在菜单的容器中使用z-index属性，可以将表的z-index设置为1，将菜单的z-index设置为2.

请参阅： http://www.w3schools.com/cssref/pr_pos_z-index.asp

Answer 2

您可以设置＆＃34; z-index＆＃34;表+菜单的属性。 z-index处理＆＃39; z＆＃39;元素的位置。 z-index也只能与＆＃39;位置相结合。属性。数字越大，元素越高（前面越多）。

代码更新：

示例：

<center style="position:relative;z-index:10;">...

<center style="position:relative;z-index:0;">...

有关更多信息，请查看css-tricks文章：https://css-tricks.com/almanac/properties/z/z-index/

Answer 3

根据您的JSfiddle，将菜单和iframe的包含中心标记设置为position: relative;并给出第一个中心标记（包含您的菜单的标记）z-index: 2。

此外，不推荐使用中心标记。您可能希望用div标签替换它们。然后，这个plucky little start-up在他们的主页上使用了中心标签，那么我该判断谁？

为什么我的iframe隐藏了我的下拉菜单

3 个答案: