深入理解position sticky 粘性定位

作者: 辉夜真是太可爱啦 | 来源:发表于2020-05-27 16:40 被阅读0次

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

粘性定位可以简单理解为relative和fixed布局的混合。

基本概念

流盒

指的是粘性定位元素最近的可滚动元素（overflow属性值不是visible的元素）的尺寸盒子，如果没有可滚动元素，则表示浏览器视窗盒子。
粘性约束矩形

即粘性布局元素的父级元素矩形

特性

当粘性约束矩形在可视范围内为relative，反之，则为fixed
粘性定位元素如果和它的父元素一样高，则垂直滚动的时候，粘性定位效果是不会出现的
它的定位效果完全受限于父级元素们。如果父元素的overflow属性设置了scroll，auto,overlay值，那么，粘性定位将会失效
同一容器中多个粘贴定位元素独立偏移，因此可能重叠；位置上下靠在一起的不同容器中的粘贴定位元素则会鸠占鹊巢，挤开原来的元素，形成依次占位的效果。

案例

案例一(了解流盒以及粘性约束矩形)

<body>
    <div>
        <nav>导航</nav>
    </div>
</body>

body{
    height: 2000px;
    width: 100%;
    background-color: red;
}
div {
    height: 200px;
    margin-top: 50px;
    border: solid deepskyblue;
    width: 400px;
    background-color: deepskyblue;
}
nav {
    position: sticky;
    top: 20px;
    background: yellow;
    height: 60px;
    line-height: 60px;
}

image

所以，如果粘性定位元素的高度如果和粘性定位的父元素高度相等的话，粘性定位元素在粘性约束矩形中将会没有实现粘性效果的活动空间，随着粘性约束矩形消失在可视范围内时，粘性定位元素也将会一同消失在可视范围内，也就是所谓的失效效果。

案例二(多元素粘性效果)

<body>
    <div>
        <nav>导航</nav>
        <header>头部</header>
    </div>
</body>

body{
    height: 2000px;
    width: 100%;
    background-color: red;
}
div {
    height: 200px;
    margin-top: 50px;
    border: solid deepskyblue;
    width: 400px;
    background-color: deepskyblue;
}
nav {
    position: sticky;
    top: 20px;
    background: yellow;
    height: 60px;
    line-height: 60px;
}
header {
    position: sticky;
    top: 20px;
    background: green;
    height: 60px;
    line-height: 60px;
    display: block;
}