z-index 显示的层叠关系，数字越大越在上面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; } body{ padding-top: 80px; /*从80px以下显示*/ } .header{ width: 100%; height: 80px; background-color: red; position: fixed; top:0; z-index: 99999; /*z-index最大，始终显示在上面*/ } .wrap{ width: 100%; height: 500px; background-color: green; color: #fff; } .wrap p{ position: relative; z-index: 3; } </style> </head> <body style="height: 2000px;"> <div class="header"></div> <div class="wrap"> <p>内容区域</p> //最终结果 ：滑动滚动条，会被导航栏盖住 </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; } .father{ width: 300px; height: 300px; border: 1px solid red; position: relative; z-index: 12; } .sendie{ width: 100px; height: 100px; background-color: red; position: absolute; top: 270px; left: 320px; /*z-index: 10;*/ } .father2{ width: 300px; height: 300px; border: 1px solid green; position: relative; z-index: 11; } .tailiang{ width: 100px; height: 100px; background-color: green; position: absolute; top: -30px; left: 320px; /*z-index: 5;*/ } </style> </head> <body style="height: 2000px"> <div class="father"> <div class="sendie"> </div> </div> <div class="father2"> <div class="tailiang"></div> </div> </div> </body> </html> <!--使用z-index比较的时候要看父z-index的大小，子z-index的大小不作为考虑-->
