一、static定位
没有定位，遵循正常的文档流对象，不会受到 top, bottom, left, right影响。
.static {position: static;/*默认*/width: 100px;height: 100px;border: 3px solid #73AD21;}
二、相对定位
相对该元素原本文档流的位置进行定位，且原本的位置保留。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>.box1,.box2,.box3{display: flex;align-items: center;justify-content: center;}.box1 {width: 100px;height: 100px;border: 1px solid #73AD21;}.box2{position: relative;/*相对定位*/width: 100px;height: 100px;border: 1px solid yellow;top: 100px;left: 100px;}.box3{width: 100px;height: 100px;border: 1px solid green;}</style></head><body><div class="box1">盒子一</div><div class="box2">盒子二</div><div class="box3">盒子三</div></body></html>
如果说：将盒子二的定位模式改为默认
很明显，相对定位是相对于原本文档流的位置进行定位的，且原有位置是保留的，其他元素无法占用。至于具体定位规则在下面会具体解释。
三、绝对定位
绝对定位是相对于父组件(前提是该组件是相对、绝对、固定定位的)，如果父组件不是相对定位的，则继续向上找，直到找到顶级组件(浏览器)进行定位。且父组件位于那一层，则子组件就位于那一层。
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>绝对定位</title><style>.box1{width: 400px;height: 400px;border: 1px solid red;}.box2{position: relative;/*相对定位*/width: 300px;height: 300px;border: 1px solid yellow;top: 50px;left: 50px;}.box3{position: absolute;/*绝对定位*/width: 200px;height: 200px;border: 1px solid green;top: 50px;left: 50px;background-color: green;}</style></head><body><div class="box1"><div class="box2">//父组件<div class="box3">//子组件</div></div></div></body></html>
根据规则，box2是box3的父组件，所以定位是相对于box2进行定位的。
如果说：把box1作为box3的父组件时(box1为相对定位,box3为绝对定位,box2为默认)。 为了效果更明显，box2设置外边框为50px，其他条件不变
很明显：是相对于box1进行定位的。
如果说找不到对应的父组件时，父组件为浏览器
解释：父组件位于那一层，则子组件就位于那一层
<style>.box1{width: 400px;height: 400px;background-color: red;}.box2{position: relative;width: 300px;height: 300px;background-color: yellow;top: 50px;left: 50px;z-index: -1;/*层数*/}.box3{position: absolute;width: 200px;height: 200px;top: 50px;left: 50px;background-color: green;}</style><div class="box1"><div class="box2"><div class="box3"></div></div></div>
box3的背景颜色很明显没有显示出来，因为其父组件在-1层。而box1默认在第0层所以显示不了。改变子组件的层数也是一样的。
此时应该修改父组件的层数使其超过上一个盒子的层数
四、固定定位
参照物是浏览器，且原有位置(文档流位置)被消除,其他元素会忽略它的存在。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>.box{position: fixed;width: 100%;height: 20px;background-color: yellowgreen;top: 100px;left: 10px;}</style></head><body><div class="box"></div></body></html>
五、sticky定位
该定位是介于相对定位和绝对定位之间
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>div.sticky {position: sticky;top: 0;/*阈值*/padding: 5px;background-color: #cae8ca;border: 2px solid #4CAF50;}</style></head><body><p>顶部</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>
超过阈值时
六、定位规则
步骤一：选定参照物
相对定位:文档流绝对定位:处在浮游层的父组件固定定位:浏览器
步骤二：选取参考点(一般通过本身元素查找)
举例(绝对定位)：
<head><meta charset="utf-8" /><title>绝对定位</title><style>.box1{/*父组件*/position: relative;width: 400px;height: 400px;border: 1px solid red;}.box2{width: 300px;height: 300px;border: 1px solid yellow;margin: 50px;}.box3{/*子组件*/position: absolute;width: 200px;height: 200px;border: 1px solid green;/** 通过下面可得参照点是父组件的左上角* 找到父组件的左上角后，* 如果值是负的，则沿父组件对应边的反方向运动对应距离，正则相反。* (比如top:50px;left: 50px;)* 已知参照点为左上角，因为是top,且该值为正，故沿边方向移动（向下）移动50px* left，向右移动50px。* 此时，做延长线，相交点即为子组件的左上角，然后通过子组件的width,height绘制。*/top: 50px;/*上*/left: 50px;/*左*/}</style></head><body><div class="box1"><div class="box2"><div class="box3"></div></div></div></body></html>
其他的定位方法都一样的，只要找对参照物及参照点及可。
注意：
上面的第二部分相对定位中，看图片很明显，第二个盒子的一条边与第三个盒子的边右重叠，这是因为盒子我定义了有边框为1px,所以实际的盒子长度要加上边框的长度。
欢迎访问我的个人博客
