深刻理解position sticky 粘性定位

粘性定位能够简单理解为relativefixed布局的混合。

基本概念

  • 流盒css

    指的是粘性定位元素最近的可滚动元素(overflow属性值不是visible的元素)的尺寸盒子,若是没有可滚动元素,则表示浏览器视窗盒子。html

  • 粘性约束矩形浏览器

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

特性

  • 当粘性约束矩形在可视范围内为relative,反之,则为fixed
  • 粘性定位元素若是和它的父元素同样高,则垂直滚动的时候,粘性定位效果是不会出现的
  • 它的定位效果彻底受限于父级元素们。若是父元素的overflow属性设置了scrollauto,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;
}
复制代码

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

  • 案例二(多元素粘性效果)
<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;
}
复制代码

能够看到当一个父元素内有两个粘性元素时,后面的粘性元素随着滚动会覆盖前面的粘性元素。spa

可是,若是给黄色导航设置z-index:20,绿色头部设置z-index:19,那么,黄色将会覆盖绿色,而不是原本的后来居上的效果。毕竟,当出现粘性效果的时候,此时元素的效果至关position:fixedz-index会生效。code

本文参考:

www.zhangxinxu.com/wordpress/2… www.zhangxinxu.com/wordpress/2…cdn

相关文章
相关标签/搜索