粘性定位能够简单理解为
relative
和fixed
布局的混合。
流盒css
指的是粘性定位元素最近的可滚动元素
(overflow属性值不是visible的元素)的尺寸盒子,若是没有可滚动元素,则表示浏览器视窗盒子。html
粘性约束矩形浏览器
即粘性布局元素的父级元素矩形wordpress
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;
}
复制代码
因此,若是粘性定位元素的高度若是和粘性定位的父元素高度相等的话,粘性定位元素在粘性约束矩形中将会没有实现粘性效果的活动空间,随着粘性约束矩形消失在可视范围内时,粘性定位元素也将会一同消失在可视范围内,也就是所谓的失效效果。布局
<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:fixed
,z-index
会生效。code
www.zhangxinxu.com/wordpress/2… www.zhangxinxu.com/wordpress/2…cdn