CSS系列之定位方式有哪几种？详解sticky粘性定位

[yuanyuanbyte]

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;

• https://www.runoob.com/css/css-positioning.html
• https://www.jb51.net/css/598347.html

粘性定位的注意事项

先看一个例子，代码如下：

<!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>

效果：

同一容器中多个粘贴定位元素独立偏移，因此可能重叠；位置上下靠在一起的不同容器中的粘贴定位元素则会鸠占鹊巢，挤开原来的元素，形成依次占位的效果（这个下面会具体讲到）。

第一个特性源自粘性定位的定义，这么设计主要是为了避免当多个滚动互相嵌套的时候，粘性定位混乱。

第二个特性原因就是本文提到的粘性定位的计算规则，具体解释：

当我们的粘性定位元素都在一个容器的时候，大家都公用一个巨大的粘性约束矩形，因此，滚动的时候会一个一个往上重叠。

当我们的粘性定位元素属于不同容器的时候，就会有多个不同的粘性约束矩形，这些粘性约束矩形正好一个一个排列得很整齐，于是视觉上达成一个巧合一般的约定，即上一个粘性定位元素被滚走，下一个粘性定位元素正好开始有粘性效果。

参考

• https://www.zhangxinxu.com/wordpress/2020/03/position-sticky-rules/