爲什麼我的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隱藏我的下拉菜單

回答

相關問題