【每日记录】快速实现固定页头的效果!!

170 阅读1分钟

position:sticky这孩子的名字叫粘性定位!!

指定定位方式并设置到浏览器顶部的距离为0。

有效代码:

position: sticky;
top: 0px;

具体实现

<body>
     <div id="box">
         <div>
            页头!!
         </div>
     </div>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        #box{
            background-color: bisque;
            width: 100%;
            height: 2000px;
            
        }
        #box div:nth-child(1){
            width: 100%;
            height: 80px;
            position: sticky;
            background-color: blueviolet;
            top: 0px;
        }
    </style>
</body>

效果

页头.jpg

传送门:CSS中容易被忽视的 position属性sticky