我們開(kāi)發(fā)的時(shí)候，經(jīng)常會(huì)遇得到一些網(wǎng)站，頭部和尾部一毛一樣，這樣頭部尾部相同的網(wǎng)站，怎么都不可能把頭部和尾部重新書(shū)寫(xiě)一遍吧，不僅浪費(fèi)時(shí)間還顯示的是自己的網(wǎng)站代碼重復(fù)率比較多，顯示自己沒(méi)有水平。下面長(zhǎng)沙前端培訓(xùn)班分享：iframe中的二級(jí)菜單被遮蓋怎么辦：

解決這個(gè)問(wèn)題首先需要我們經(jīng)常會(huì)把這樣重復(fù)的頭部和尾部都單獨(dú)提出來(lái)，制作成一個(gè)獨(dú)立的網(wǎng)頁(yè)，然后通過(guò)iframe框架進(jìn)行引入。如果公共頭部中有對(duì)應(yīng)的一級(jí)導(dǎo)航和二級(jí)菜單導(dǎo)航的胡被遮住這可怎么解決呢？

各種網(wǎng)站和各種公眾號(hào)上面方法使用了js，但是js比較麻煩，并且代碼粘貼下來(lái)使用的時(shí)候會(huì)出現(xiàn)問(wèn)題，跑不起來(lái)，接下來(lái)由我提供給你們一個(gè)簡(jiǎn)單快速高效的解決問(wèn)題辦法。那叫一個(gè)so easy；并且關(guān)鍵代碼也給出了注釋喲，值得你來(lái)查看。問(wèn)題代碼：

（一）公共頭部----帶有二級(jí)菜單

HTML源碼

<!-- 這里是頭部logo區(qū)域 -->

<div class="box">這里是logo</div>

<!-- 通欄和導(dǎo)航 -->

<div class="layout">

<ul>

<li>你好

<ul>

<li>你好1</li>

<li>你好2</li>

<li>你好3</li>

</ul>

</li>

<li>我好

<ul>

<li>我好1</li>

<li>我好2</li>

<li>我好3</li>

<li>我好4</li>

</ul>

</li>

<li>大家好

<ul>

<li>大家好1</li>

<li>大家好2</li>

</ul>

</li>

<li>勇哥

<ul>

<li>勇哥1</li>

<li>勇哥2</li>

<li>勇哥3</li>

</ul>

</li>

<li>真的

<ul>

<li>真的1</li>

<li>真的2</li>

<li>真的3</li>

<li>真的4</li>

<li>真的5</li>

</ul>

</li>

<li>很帥

<ul>

<li>真的1</li>

<li>真的2</li>

<li>真的3</li>

<li>真的4</li>

<li>真的5</li>

</ul>

</li>

<li>好帥啊

<ul>

<li>真的1</li>

<li>真的2</li>

<li>真的3</li>

<li>真的4</li>

<li>真的5</li>

</ul>

</li>

<li>太帥了

<ul>

<li>真的1</li>

<li>真的2</li>

<li>真的3</li>

<li>真的4</li>

<li>真的5</li>

</ul>

</li>

<li>真的哦

<ul>

<li>真的1</li>

<li>真的2</li>

<li>真的3</li>

<li>真的4</li>

<li>真的5</li>

</ul>

</li>

<li>結(jié)束了

<ul>

<li>真的1</li>

<li>真的2</li>

<li>真的3</li>

<li>真的4</li>

<li>真的5</li>

</ul>

</li>

</ul>

</div>

CSS源碼

<style>

*{margin:0;padding:0}

ul{list-style:none}

a{text-decoration: none;}

img{vertical-align: middle;}

.box{

width:1000px;

height:100px;

background-color: pink;

margin:0 auto;

font-size:50px;

font-weight: bold;

text-align: center;

line-height: 100px;

}

.layout{

height:60px;

background-color:cornflowerblue;

}

.layout>ul{

width: 1000px;

margin: 0 auto;

height:60px;

}

.layout>ul>li{

font-size:14px;

float: left;

width:100px;

text-align: center;

line-height: 60px;

border-right:1px dashed white;

box-sizing: border-box;

color:white

}

.layout>ul>li:last-child{

border-right:0px

}

.layout>ul>li>ul{

background-color: pink;

color:white;display: none;

}

.layout>ul>li:hover>ul{

display: block;

position: relative;

}

/* 取消滾動(dòng)條 */

::-webkit-scrollbar{

display: none;

}

</style>

效果：

（二）公共主體----需要引入頭部

HTML源碼

<!-- 引入頭部 -->

<iframe id="one" src="01-header.html" frameborder="0" width="100%" height="160px"frameborder="0"></iframe>

<!-- 獨(dú)立主體 -->

<div class="tip" wmode="transparent">

我是獨(dú)立的頁(yè)面主體部分

</div>

<!-- 引入尾部 -->

<iframe src="03-footer.html" frameborder="0" frameborder="0" width="100%" height="100px"frameborder="0"></iframe>

CSS源碼

*{margin:0;padding:0}

.tip{

height:500px;

background-color: yellowgreen;

text-align: center;

line-height: 500px;

font-size:80px;

font-weight:bold;

}

/*取消3像素間距*/

iframe{vertical-align: middle;}

/*取消滾動(dòng)條*/

::-webkit-scrollbar{

display: none;

}

效果：

問(wèn)題所在

描述：引入公共的頭部之后，二級(jí)菜單，被主體區(qū)域內(nèi)容給遮蓋住了，使用js實(shí)現(xiàn)起來(lái)也是非常的困難的；

解決問(wèn)題：描述如下

將在主體引入的頭部頁(yè)面中，引入的順序改變一下，放在主體的后面；放在主體后面的話(huà)加載順序就會(huì)出現(xiàn)問(wèn)題，主體就會(huì)顯示在主體后面。那如何調(diào)整順序問(wèn)題呢？使用固定定位，定位在引入頁(yè)面的最上面，但是定位后也會(huì)把布局遮蓋住，如何解決遮蓋主體的問(wèn)題呢，就是需要給主體添加margin-top;來(lái)解決問(wèn)題，這樣二級(jí)菜單就能顯示出來(lái)了

修改后的主體代碼：HTML

<!-- 獨(dú)立主體 -->

<div class="tip" wmode="transparent">

我是獨(dú)立的頁(yè)面主體部分

</div>

<!-- 引入頭部 -->

<iframe id="one" src="01-header.html" frameborder="0" width="100%" height="160px"frameborder="0"></iframe>

<!-- 引入尾部 -->

<iframe src="03-footer.html" frameborder="0" frameborder="0" width="100%" height="100px"frameborder="0"></iframe>

效果：加載順序

修改代碼：CSS

<style>

*{margin:0;padding:0}

.tip{

height:500px;

background-color: yellowgreen;

text-align: center;

line-height: 500px;

font-size:80px;

font-weight:bold;

/*修改的代碼*/

margin-top:160px

}

iframe{vertical-align: middle;}

::-webkit-scrollbar{

display: none;

}

/*修改的代碼*/

#one{

position:fixed;

top:0px;

width:100%;

height:500px;

}

</style>

效果：

以上就是：通過(guò)HTML和CSS來(lái)解決，iframe二級(jí)菜單被遮住的效果：關(guān)鍵代碼就是調(diào)整順序，和添加定位。

相關(guān)文章

果在圖片上顯示文字，經(jīng)常會(huì)遇到這個(gè)情況，就是當(dāng)文字和背景顏色差不多時(shí)，文字會(huì)看不清楚，我們一般通過(guò)給文字加text shadow或者修改圖片的透明度來(lái)讓文字顯示更加突出。我們今天說(shuō)一下透明度的問(wèn)題，一般我們干這個(gè)活兒是通過(guò)photoshop來(lái)做，其實(shí)CSS本身也可以實(shí)現(xiàn)類(lèi)似的效果。如何做？

咱們先從下面這個(gè)例子開(kāi)始，有一張背景圖片，上面有些文字：

對(duì)應(yīng)的顯示效果如下：

可以看到，文字顯示不是特別清晰，現(xiàn)在要給圖片增加一層控制透明度，我們使用偽元素實(shí)現(xiàn)：

可以看到，加入了一層，inset是top, bottom, left, right的簡(jiǎn)寫(xiě)形式，將它們都設(shè)為0。通過(guò)這個(gè)設(shè)置，顯示效果如下：

現(xiàn)在它把所有元素都蓋住了，而我們需要文字在這層的上面，如果加入z-index:-1, 則這個(gè)層又跑到所有元素下面，看不到了。

要解決這個(gè)問(wèn)題，我們需要引入一個(gè)關(guān)鍵CSS，isolation: isolate; 通過(guò)它來(lái)創(chuàng)建一個(gè)新的CSS堆疊上下文，從而使得這個(gè)層不會(huì)跑到外面，具體關(guān)于isolation, 我專(zhuān)門(mén)寫(xiě)過(guò)一個(gè)文章，這里可以直接查看詳細(xì)信息：使用isolation: isolate來(lái)創(chuàng)建堆疊上下文

可以看到，這個(gè)層現(xiàn)在位于文字和圖片中間，如下所示：

那現(xiàn)在就簡(jiǎn)單了，可以更改opacity來(lái)控制其透明度，

最后將顏色改為黑色，就達(dá)到了我們所期望的效果。

附上完整的CSS：

感謝閱讀！