定位（position）
发布时间：2024-08-18 18:01 作者：一友画
定位（position）
-
4种定位方式：静态（static）、相对（relative）、绝对（absolute）、固定（fixed）
-
4种边偏移属性：left、right、top、bottom
-
1.静态定位
语法： position:static;
-
a)加了静态定位，元素就成了标准流
-
b)偏移值对静态定位无效
-
2.相对定位
语法： position:relative;
-
a)相对定位参考自身在标准流中的位置进行偏移，移动的出发点是自身标准流的位置
-
b)不会对标准流的元素造成影响，没有脱离文档流，移动后，自身在标准流中还占有空间
-
3.绝对定位
语法： position:absolute;
-
a)偏移位置参考设置过定位（包括relative，position，fixed）的直系父元素，如果没找到，一直往上级找，直到html
-
b)会脱离文本流，不再继承父级的样式
-
c)margin:auto;对于设置过绝对定位的元素不起作用
-
4.固定定位
语法： position:fixed;
-
a)会脱离文档流，不占据标准流的空间
-
b)不继承父元素的宽高，需要给自身定义宽高
-
c)margin:auto;对固定定位的元素不起作用
四种定位总结：
|
定位模式 |
是否脱标占有位置 |
是否可以使用边偏移 |
移动位置基准 |
|
静态static |
不脱标，正常模式 |
不可以 |
正常模式 |
|
相对定位relative |
不脱标，占有位置 |
可以 |
相对自身位置移动 |
|
绝对定位absolute |
完全脱标，不占有位置 |
可以 |
相对于定位的父级移动位置 |
|
固定定位fixed |
完全脱标，不占有位置 |
可以 |
相对于浏览器移动位置 |
以上内容，在整理时难免有疏漏错误之处，如有发现，可以通过顶部的“联系站长”提出反馈，感谢您的支持！