固定定位


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>