文章目录
前言
试着先用typora写发现没那么顺手,
所以还是直接在c站写吧
那咱废话不多说直接开始看五种position
static静态定位
即position的默认属性
从上到下，从左到右依次排列
属于正常的文档流，可以用这个解除产生的其他定位方式
relative相对定位
相对自身的初始位置移动
但是元素所占有的空间还在原来的位置
可以通过设置relative属性但是并不进行移动，以此来配合absolute进行定位
absolute绝对定位
会脱离文档流，不会挤占空间
如果其父级元素满足以下几个条件中至少一个条件：
1.设置了非static的定位
2.具有transform属性
3.具有perspective属性
那么，它相对满足上述条件的父级中距离自己最近的一个进行移动
如果不存在这样的父级，那么相对于body进行移动
fixed固定定位
类似于abosolute，也会脱离文档流，但是fixed相对窗口进行移动
会始终固定在窗口的某一位置
比如C站的右下角这几个按钮的父级就是采用的固定定位，无论窗口怎么滑动，它都是在右下角同一位置
sticky黏性定位
（黏性布局是个人翻译…
这是C3的新属性，具体效果类似relative + fixed
即达到某个位置的时候就保持不动
其中son具有sticky属性
<body>
<br><br><br><br><br>
<div class="son">123</div>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
</body>
效果如下
当我们向下滑动窗口，发现son开始保持在某个位置了
（这里的某个位置是指我设置的top:10px;）
继续，依旧保持不动
后记
如果本篇文章对您有所帮助的话，点个不要钱的赞吧!!!
❤您的支持就是我继续创作的动力！❤