sticky 中文意思是黏性的意思.position:sticky 就是黏性定位.过去黏性定位的效果是通过 JavaScript 代码实现的.当导航元素在屏幕内的时候,导航元素滚动跟随;当导航元素滚出屏幕的时候,导航元素固定定位
- 示例:黏性定位固定在导航栏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
nav {
position: sticky;
background-color: deepskyblue;
display: table;
top: 0px;
}
p {
margin: 0;
padding: 0;
width: min-content;
word-break: anywhere;
}
</style>
</head>
<body>
<nav>
<h3>测试</h3>
<h3> 大家觉得</h3>
<h3> 方见附件</h3>
</nav>
<p> 就的今晚街道金请勿觉得基底节区五军对决启吾东疆桥文件</p>
</body>
</html>
黏性定位底层的渲染规则和固定定位没有任何的关系,而是相对定位的延续.黏性定位和相对定位的相似地方
- 元素放声偏移的时候,元素的原始位置发生保留
- 创建新的绝对定位包含块,也就是黏性定位元素如果有绝对定位的子元素,那么这个子元素设置 left,right,top,bottom属性的偏移量计算都是相当于当前的黏性元素
- 支持设置z-index属性值来改变元素的层叠顺序
黏性定位和相对定位不同的地方
- 偏移计算元素不一样.相对定位偏移计算的容器是父元素,而黏性定位偏移计算的元素的层级最近的滚动元素(overflow 属性不是 visible的元素)
- 重叠元素不一样:年定定位重叠的表现形式是重叠,相对元素是相互独立的
网友评论