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

我已经寻找彻底的答案，但我已经在这里找到答案似乎不会为我工作...为什么我的iframe隐藏我的下拉菜单

我有一个是一个下拉菜单由包含iframe的表格隐藏。我已经包含下面的代码。

如何使菜单显示在包含iframe的表格顶部？

我已经尝试过z-index解决方案，但他们没有工作。我也尝试过在iframe标签中使用wmode =“transport”，但这并没有奏效。

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; 
}

的HTML表的iframe：

<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>

菜单的容器

来源

2016-02-10 Michael Cuccia

小提琴会很好， –

欢迎来到堆栈溢出！你可以把你的问题链接到一个jsfiddle或一个stack-snippet，所以我们可以看到你所看到的是什么？ –

jsfiddle - https://jsfiddle.net/mjcuccia/cfrbvx5L/ –

使用Z-index属性，你可以设置Z例如，表的索引为1，菜单的z索引为2.

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

来源

2016-02-10 16:18:20 EladBash

菜单位于另一张桌子内部的桌子内部进行定位。我应该在立即包含的表还是外部表上设置z-index？另外，我是否应该简单地使用position：static，以便包含表的位置不会真的改变？ –

我在包含iframe的表和包含iframe的表上尝试了z-index，但没有奏效。 –

您可以设置表格+菜单的“z-index”属性。 z-index处理元素的'z'位置。 z-index也只适用于'position'属性。数字越高，元素越高（更多在前面）。

代码更新：

例子：

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

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

欲了解更多信息，请检查CSS-技巧文章：https://css-tricks.com/almanac/properties/z/z-index/

来源

2016-02-10 16:18:28 levelzwo

菜单位于另一张桌子内部的桌子内，用于定位。我应该在立即包含的表还是外部表上设置z-index？另外，我是否应该简单地使用position：static，以便包含表的位置不会真的改变？ –

我在直接包含的表格和包含iframe的表格上尝试了z-index，但它不起作用。 –

嘿迈克尔，我刚刚检查了你的jsfiddle并找到了解决方案。您必须将z-index应用于您的

标记（您有两个标记），因为z-index适用于父元素，在这种情况下，第一个元素是居中。我更新了上面的代码。如果有效，请将我的答案标记为正确。 – levelzwo

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

此外，中心标记已被弃用。你可能想用div标签替换它们。再次，这plucky little start-up在他们的主页上使用中心标签，所以我是谁来判断？

来源

2016-02-10 17:21:46 Ber

，没有工作。 iframe中的.pdf仍然显示在列表菜单的前面。 –

https://jsfiddle.net/Shambolaz/cfrbvx5L/10/ 这是基于你的JSfiddle，我在小提琴的CSS窗格底部添加了相关的CSS修补程序。让我知道如果这不起作用。 – Ber

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

回答

相关问题