定位
-
静态定位
-
概念：当元素没有设置定位属性时，默认为静态定位
position: static;
-
-
固定定位
-
概念：把元素固定在页面中，不会随着滚动条而滚动
position: fixed; -
特点：
- 固定定位元素会脱离文档流，显示在标准文档流之上
- 在当前位置脱离文档流，偏移量设置之后，会参考页面视口区域进行偏移(页面窗口的显示区域)
-
偏移量：
top：距离参考位置上边缘的距离bottom：距离参考位置下边缘的距离left：距离参考位置左边缘的距离right：距离参考位置右边缘的距离
-
-
相对定位：
-
概念：让页面元素相对原本位置进行移动
position: relative; -
特点：
- 只设置相对定位，页面没有任何特殊效果
- 可以设置偏移量，会参考元素原本的位置进行偏移
- 元素不会脱离文档流，元素会显示在其他标准文档流元素之上
- 一般会配合绝对定位一起使用，通称为
子绝父相
-
偏移量：
top：距离参考位置上边缘的距离bottom：距离参考位置下边缘的距离left：距离参考位置左边缘的距离right：距离参考位置右边缘的距离
-
注意：父元素移动之后，设置了相对定位的子元素也会一起移动
-
-
绝对定位：
-
概念：让页面元素参考定位父级移动
position: absolute; -
特点：
- 绝对定位元素会脱离文档流，显示在标签文档流之上
- 在当前位置脱离文档流，可以设置偏移量，默认参考视口区域进行偏移；如果有定位父级，那么参考最近的定位父级进行偏移
- 元素原本的位置不再占用
-
偏移量：
top：距离参考位置上边缘的距离bottom：距离参考位置下边缘的距离left：距离参考位置左边缘的距离right：距离参考位置右边缘的距离
-
层级
-
定位显示在非定位元素之上，后面定位元素显示在前面定位元素之上
z-index:数字；- 默认为0，数字越大表示层级越高，显示在其他元素之上
- 可以设置为负值，元素会显示在标准文档流之下
- 只能设置给定位元素，静态定位元素不能设置层级
