CSS系列之定位方式有哪几种？详解sticky粘性定位
yuanyuanbyte opened this issue · 0 comments
css有五种定位方式，分别是：static， relative，absolute，fixed 和 sticky。
1. static 静态定位
HTML 元素的默认值，指定元素使用正常的布局行为。
静态定位的元素 top, right, bottom, left 和 z-index 属性无效。
2. relative 相对定位
相对定位是相对于默认位置（即static时的位置）进行偏移。
相对定位元素经常被用来作为绝对定位元素的容器块。
3. absolute 绝对定位
绝对定位元素会被移出正常文档流，并不为元素预留空间。
相对于上级元素（一般是父元素）进行偏移。
通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置，如果元素没有已定位的父元素，那么它的位置相对于<html>。
4. fixed 固定定位
固定定位元素会被移出正常文档流，并不为元素预留空间。
相对于视口（viewport，浏览器窗口）进行偏移。
元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动，打印时，元素会出现在的每页的固定位置。
5. sticky 粘性定位
粘性定位跟前面四个属性值都不一样，它会产生动态效果，很像relative和fixed的结合。
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
sticky 粘性定位 详解
当元素距离页面视口（Viewport，也就是fixed定位的参照）顶部距离大于 50px 时，元素以 relative 定位表现，而当元素距离页面视口小于 50px 时，元素表现为 fixed 定位，也就会固定在顶部。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.aaa {
padding: 100px;
}
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 50px;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
</style>
</head>
<body>
<p>尝试滚动页面。</p>
<p class="aaa">注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>
<div class="sticky">我是粘性定位!</div>
<div style="padding-bottom:2000px">
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
</div>
</body>
</html>效果：
表现方式如下：
距离页面顶部大于20px，表现为 position:relative;
距离页面顶部小于20px，表现为 position:fixed;
粘性定位的注意事项
先看一个例子，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{ /*重置样式*/
margin: 0;
padding: 0;
}
dl{ /*dl是父元素*/
padding-top: 24px;/*设置字距离盒子距离*/
}
dt{ /*设置粘性定位元素*/
background: orange;/*背景颜色*/
color:#fff;/*字体颜色*/
position: sticky;/*设置粘性定位*/
top:10px;/*设置粘性定位达到偏移量固定位置*/
}
</style>
</head>
<body>
<div>
<dl>
<dt>A</dt>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
</dl>
<dl>
<dt>B</dt>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
</dl>
<dl>
<dt>C</dt>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
</dl>
<dl>
<dt>D</dt>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
</dl>
<dl>
<dt>E</dt>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
</dl>
<dl>
<dt>F</dt>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
</dl>
<dl>
<dt>F1</dt>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
</dl>
<dl>
<dt>F2</dt>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
</dl>
<dl>
<dt>F3</dt>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
</dl>
<dl>
<dt>F4</dt>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
</dl>
<dl>
<dt>F5</dt>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
</dl>
<dl>
<dt>F6</dt>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
</dl>
<dl>
<dt>F7</dt>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
</dl>
<dl>
<dt>F</dt>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
</dl>
<dl>
<dt>F1</dt>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
</dl>
<dl>
<dt>F2</dt>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
</dl>
<dl>
<dt>F3</dt>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
</dl>
<dl>
<dt>F4</dt>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
</dl>
<dl>
<dt>F5</dt>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
</dl>
<dl>
<dt>F6</dt>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
</dl>
<dl>
<dt>F7</dt>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
<dd>1111111</dd>
</dl>
</div>
</body>
</html>效果：
同一容器中多个粘贴定位元素独立偏移，因此可能重叠；位置上下靠在一起的不同容器中的粘贴定位元素则会鸠占鹊巢，挤开原来的元素，形成依次占位的效果（这个下面会具体讲到）。
第一个特性源自粘性定位的定义，这么设计主要是为了避免当多个滚动互相嵌套的时候，粘性定位混乱。
第二个特性原因就是本文提到的粘性定位的计算规则，具体解释：
当我们的粘性定位元素都在一个容器的时候，大家都公用一个巨大的粘性约束矩形，因此，滚动的时候会一个一个往上重叠。
当我们的粘性定位元素属于不同容器的时候，就会有多个不同的粘性约束矩形，这些粘性约束矩形正好一个一个排列得很整齐，于是视觉上达成一个巧合一般的约定，即上一个粘性定位元素被滚走，下一个粘性定位元素正好开始有粘性效果。