CSS五种定位(相对定位、绝对定位、固定定位、static定位、sticky 定位)模式学习笔记

一、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,所以实际的盒子长度要加上边框的长度。

欢迎访问我的个人博客