固定定位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>

image-20201229201744851

粘性定位 sticky

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

特点:

  1. 浏览器可视距离为参照点
  2. 必须设置 top bottom right left 其中一个 要不然就是相对定位一样
  3. 会占标准流的位置(相对定位)
  4. 兼容性差 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>

image-20201229205950400

叠放顺序 z-index

我们在使用定位的时候一定会遇到这样的问题,别的元素会盖住其他元素,类似于ps的图层一样。这里我们就要使用z-index

要点:

  1. 默认值为auto
  2. 值为整数,可以为负数,数值越大盒子越在上面
  3. 没有单位
  4. 如果值相同,那么按照书写顺序,后来者居上
  5. 只有定位的盒子才有z-index属性,浮动是没有的

结语

假期的第三天
微信小程序

本文由 越行勤 创作,如果您觉得本文不错,请随意赞赏
采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名
原文链接:https://yingwiki.top/2020/12/29/c-s-s--ding-wei-2
最后更新于:  171  天前,内容可能已经不具有时效性,请谨慎参考。

Q.E.D.


努力学习的小菜鸟