固定定位

2022-05-12 16:02:51 作者：互联网

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>固定定位</title>
        <style type="text/css">
            .box1{
                width: 200px;
                height: 200px;
                background-color: #bfa;
                margin-left: 100px;
            }
            
            .box2{
                width: 200px;
                height: 200px;
                background-color: #ff0;
                /*
                    将元素的position设置为fixed时，则开启了元素的固定定位
                    固定定位的特点大部分都和绝对定位一样
                    不同的是固定定位总是相对与浏览器的窗口（视口viewport）进行定位
                 */
                position: fixed;
                top:0px;
                left:0px;
            }
            
            .box3{
                width: 200px;
                height: 200px;
                background-color: orange;
                position: fixed;
                top:200px;
                left:200px;
            }
        </style>
    </head>
    <body>
        <div class="box1">
            <div class="box2"></div>
            <div class="box3"></div>
        </div>
        
    </body>
</html>

标签：定位,固定,color,height,width,background,200px
来源： https://www.cnblogs.com/YcxyH/p/16262801.html