固定定位 适用于滚动滑轮，但元素位置相对于浏览器窗口不变的情况

如题目所述，将元素的position设置为fixed则开启了元素的固定定位，固定定位的特点大部分都和绝对定位一样，但固定定位总是相对于浏览器的窗口（也称视口）进行定位。视口>html>body>body的元素

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height: 2000px;/*给body增加高度，方便演示*/
        }
        .box1{
            width:500px;
            height:500px;
            background-color: yellowgreen;
            margin-left: 100px;
        }
        .box2{
            width: 200px;
            height:200px;
            background: hotpink;
            position: fixed;/*使用固定定位*/
            top:100px;/*距离浏览器窗口上部100个像素*/
            left:0px;  /*距离浏览器窗口左部0个像素*/
        }
    </style>
</head>
<body>
<div class="box1">
    <div class="box2"></div>
</div>
</body>
</html>

效果图

 

 

 

 

posted @ 2020-08-14 22:54  YuigahamaYui  阅读(352)  评论(0)    收藏  举报
码云地址：https://gitee.com/pan-hui