固定定位fixed

选择器 {position:fixed}

相对定位是 以浏览器的可视窗口作为参照点定位

不占标准流的位置（脱标），不随着滚动条滚动。

    <style>
        body {
            height: 3000px;
        }

        .box0 {
            position: absolute;
            right: 20px;
            top: 300px;
            background-color: red;
            width: 200px;
            height: 200px;

        }

        .box1 {
            position: fixed;
            right: 20px;
            top: 0;
            background-color: blue;
            width: 200px;
            height: 200px;
        }
    </style>
</head>

<body>
    <div class="box0">绝对定位</div>
    <div class="box1">固定定位</div>
</body>

粘性定位 sticky

粘性定位是相对定位(relative)和固定定位（fixed）的组合体,简单来说，在滑动过程中，某个元素距离其父元素的距离达到 sticky 粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。

特点：

浏览器可视距离为参照点
必须设置 top bottom right left 其中一个要不然就是相对定位一样
会占标准流的位置(相对定位)
兼容性差 IE不支持

    <style>
        body {
            height: 3000px;
        }

        .box1 {
            position: sticky;
            margin-top: 200px;
            top: 100px;
            width: 300px;
            height: 100px;
            background-color: #656565;
        }
    </style>
</head>

<body>
    <div class="box1">粘性定位 sticky</div>
    <p>会占用标准流的位置</p>
</body>