position: fixed 

position: fixed
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>position: fixed</title>

    <style type="text/css">
        .box1{
            width: 200px;
            height: 200px;
            background: red;
        }
        .box2{
            width: 200px;
            height: 200px;
            background: yellow;
            /*
            固定定位： fixed
            1. 固定定位也是决定定位
            2. 不同之处于
                - 他永远都相对于窗口定位
                - 不会随滚动条滚动。比如：广告，视屏，客服
            */
            position: fixed;
            left: 0px;
            top: 0px;
        }
        .box3{
            width: 200px;
            height: 200px;
            background: yellowgreen;
        }
        .box4{
            width: 200px;
            height: 200px;
            background: orange;
            position: relative;
        }

        /*.s1{*/
        /*    width: 200px;*/
        /*    height: 200px;*/
        /*    background: yellow;*/
        /*    !*5. 绝对定位改变元素性质，内联元素变为块元素(宽高‘起作用’)*!*/
        /*    position: absolute;*/
        /*}*/
    </style>
</head>
<body>
<div id="wrap">
    <div class="box1"></div>
    <div class="box4">
        <div class="box2"></div>
    </div>
    <div class="box3"></div>
<!--    <span class="s1">我是一个span</span>-->
</div>
</body>
</html>

 

posted @ 2021-02-10 20:19  xiluhua  阅读(165)  评论(0)    收藏  举报