简介
CSS（层叠样式表）中的position属性一直是控制元素定位的核心工具，对于构建响应式设计和复杂布局至关重要。 positon属性并不复杂，但想要正确使用却并不容易。这篇文章将带领你全方位深入理解position，希望能帮助你彻底解决这个让人头痛的问题。
官方文档中这么定义position属性：SS position 属性用于指定一个元素在文档中的定位方式。top，right，bottom和left属性则决定了该元素的最终位置。
其实说白了就一句话：能够灵活的改变盒子在网页中的位置
四个定位类型和五个取值
position只有四个定位类型和五个取值，下面让我们来一一介绍。
四个定位类型
定位元素（positioned element）是其位置属性为 relative, absolute, fixed 或 sticky 的一个元素（换句话说，除static以外的任何东西）。
相对定位元素（relatively positioned element）是位置属性为 relative的元素。
绝对定位元素（absolutely positioned element）是位置属性为 absolute 或 fixed 的元素。
粘性定位元素（stickily positioned element）是位置属性为 sticky 的元素。
五个取值
static：是CSS 属性的默认值。属性为static的元素将按照标准的文档流进行布局，不受top,right,bottom,left,z-index等属性的影响，其他元素会根据 static 定位元素的位置进行布局，不会因为 static 定位元素的移动而受到影响。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#box1 {
margin: 20px;
width: 200px;
height: 200px;
padding: 5px;
border: 1px solid red;
background-color: green;
}
#box2 {
margin: 10px;
width: 300px;
height: 300px;
background-color: yellow;
}
#box3 {
width: 50px;
height: 50px;
background-color: pink;
}
</style>
</head>
<body>
<!--
box1 在box2上面，正常的文档流
html 文档流 和 css 结合 样式生效 盒模型
-->
<div id="box1">
</div>
<div id="box2">
<div id="box3">box3</div>
</div>
</body>
</html>
static：正常文档流，没有什么特别的变化
relative：相对定位。相对于原位置移动 ，盒子原来的占位（文档流中的位置） 不受影响。显示模式特点保持不变（块级元素，行内元素，行内块元素等），
现在我们为box1盒子添加相对定位
#box1 {
position: relative;
/* 相对自身 */
top: 30px;
left: 30px;
}
到box1发生了一点小小的变化，它通过top和left相对于原来的位置离开了，但之前的位置并没有被box2占用掉。
absolute：绝对定位。不占用原位置。显示模式具备行内块特点。设置边偏移则相对最近的已经定位的祖先元素改变位置。如果祖先元素都未定位，则相对浏览器可视区改变位置，为box3添加绝对定位。
#box3 {
position: absolute;
/* 绝对定位 相对于父元素 */
top: 10px;
left: 10px;
}
这里可能跟预想的不太一样了，出现了特殊情况。就如上面说到的，设置absolute值之后，相对最近的已经定位的祖先元素改变位置。如果祖先元素都未定位，则相对浏览器可视区改变位置。目前我们并没有给box2添加position定位属性，所以box3将相对于浏览器可视区来改变自身的位置。
那我们现在为box2添加一个position:relative
#box2 {
position: relative;
}
这回box3终于相对于box2定位了，这也引出了我们常用的一种定位方法：子绝父相
在使用相对定位时，常常把子元素设置为position: absolute，把父元素设置为position: relative,来保证能够实现我们想要的结果。
fixed：固定定位。是一种特殊的绝对定位。元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。也就是说，元素的位置在网页滚动时不会改变。就好比一些网页上左右两边的浮窗，显示模式具备行内块特点。相对于浏览器窗口进行定位。
我们把box3的absolute改为fixed
#box3 {
position: fixed;
}
再为你的html添加一些增高的东西，使它能够上下滑动，你就会发现无论你怎么滑动页面，box3永远会出现在你的浏览器的左上角。
sticky：粘性定位。它结合了 position: relative 和 position: fixed 的特点。粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。
还是box3，我们将他的position改为sticky
#box3 {
position: sticky;
}
这回我们看到在滑动到box3之前，它一直是相对定位。当我们滑动到box3的顶部与浏览器顶部重合时，他开始变成固定定位，跟随窗口一直出现在浏览器的左上角。但是，当我们滑动页面直到box2看不到的时候，box3也会跟着消失。因为box3是box2的子元素，活动范围只在box2中，它不能够脱离box2的掌控。
总结
我们深入探讨了CSS position属性的各种模式——从静态定位到绝对定位、相对定位、固定定位以及粘性定位，每种模式都有其独特的应用场景和优势。掌握了这些知识，你将能够更加灵活地控制网页中各个元素的位置，创造出既美观又功能性强的网页布局。
