将导航栏固定在窗口的顶部

来源：互联网发布：网络安全大数据分析编辑：程序博客网时间：2024/06/01 09:03

这是一个常见的问题，代码：

<!DOCTYPE html><html lang="en"><head>   <meta charset="UTF-8">   <title>Title</title>   <style>      .header{         position: fixed;         top:0;         width: 100%;         height: 30px;         background-color: red;      }      .footer{         position: fixed;         bottom: 0;         width: 100%;         height: 30px;         background-color: red;      }      .main{         margin-top: 35px;         min-height: 1000px;         background-color: yellow;      }   </style></head><body><div class="header">header</div><div class="main">main</div><div class="footer">footer</div></body></html>

为header使用position：fixed 让header相对于视口定位在顶部，由于fixed定位使其脱离文档流，所以下面的main会向上走，可以为main设置一个上外边距，使main的内容在靠下的位置，为了不使下面的内容滚动时覆盖header，可以给header一个z-index：999；

0 0