DIV重疊 如何優先顯示(div浮在重疊的div上面)


如果有2個div有重疊,默認是根據html解析順序,最后加載的優先級最高(浮在最上面)。

 

問題:

如果想把前面加載的div顯示在最上面?關鍵字:z-index

 

舉例:

--原來的頁面:first div是被second div蓋住了:

<html>
<head>
<title>Test Div Overlap</title>
<style>
.first{
width: 366px;height: 384px;top:100px;left:100px;
position: relative;/*absolute*/
background-color:#CCCCCC;
text-align:right;
/*
z-index:2;
*/
}

.second{
width: 366px;height: 384px;top:0px;
position: absolute;
background-color:#999999;
}
</style>
</head>
<body>
<div id="first" class="first"><a href="#" title="Overlap by Second">Overlap by Second</a>&nbsp;&nbsp;first</div>
<div id="second" class="second">second&nbsp;</div>
</body>
</html>

解決方案:

1.需要將first的position設置為relative

2.將.first{}里面的z-index:2的注釋取消

結果:

發現first div浮在second的上面了。

 

解釋:

默認z-index是0,如果設置了z-index的值高於其他,就可以優先顯示。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM