粘性定位 sticky

作者: 生爱_存在 | 来源:发表于2021-11-19 11:15 被阅读0次

sticky吸顶
粘性定位
粘性定位 sticky
css粘性定位position: sticky
position：sticky粘性布局
position：sticky粘性定位
类型和位置
sticky -- position定位属性sticky值之粘性
彻底理解粘性定位 - position: sticky
CSS Sticky

该元素在父元素中必须能滚动，父元素 overflow 属性为 auto、scroll，且子元素高度超过父元素高度；
元素可以粘在顶部，也可以粘在底部
- 粘在顶部时，需要加一下 z-index 属性，因为在脱离文档流之后，后面的脱离文档流的元素会覆盖前一个吸顶元素，我下面展示没有该属性的例子；
- 粘在底部时，如果是最后一个元素，就不需要加 z-index 属性，如果不是最后一个元素且后面还有脱离文档流的元素，就需要加 z-index 属性，原因如上；
该元素必须有 top、bottom 、left 、 right 4个值之一，否则只会处于相对定位，并且根据这些属性来判断该元素粘在父元素位置；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .fa {
            width: 600px;
            height: 200px;
            background: lightpink;
            margin: 50px auto;
            overflow: scroll;
        }
        
        .item {
            position: sticky;
            width: 100px;
            margin: 10px auto;
            height: 50px;
            text-align: center;
            line-height: 50px;
            background: #096;
        }
        
        .item-no-sticky {
            width: 100px;
            margin: 10px auto;
            height: 50px;
            text-align: center;
            line-height: 50px;
            background: #096;
        }
        
        .top {
            top: 0;
            /* z-index: 99; */
        }
        
        .bottom {
            bottom: 0;
        }
    </style>
</head>
<body>
    <div class="fa">
        <span style="position:absolute">父元素 高度：1000px</span>
        <div class="item top"> 50px 1 </div>
        <div class="item top"> 50px 2 </div>
        <div class="item"> 50px 3 </div>
        <div class="item"> 50px 4 </div>
        <div class="item-no-sticky"> 50px 5 </div>
        <div class="item-no-sticky"> 50px 6 </div>
        <div class="item "> 50px 7 </div>
        <div class="item "> 50px 8 </div>
        <div class="item bottom"> 50px 9 </div>
        <div class="item bottom"> 50px 10 </div>
    </div>
</body>
</html>

结果图