1.1 静态定位:static,默认值,不研究
1.2 相对定位:relative
特点:
- 1.不脱离文档流,占据位置。
- 2.参照物是自己原来的位置。
- 3.层叠性:有定位比没有定位的层级高 都有定位后者覆盖前者 可以通过z-index调整层叠顺序,值越大层级越高,允许写负数,不带单位。
1.3 绝对定位:absolute
特点:
-
1.会脱离文档流,不占据位置。
-
2.参照物:距离最近的有定位的父级元素。 如果父级元素都没定位就按照浏览器窗口的第一屏。
-
3.层叠性:同相对。
1.4 固定定位:fixed
特点:
-
1.会脱离文档流,不占据位置。
-
2.参照物:浏览器窗口。
-
3.层叠性:同相对。
1.5 粘性定位:sticky
特点:
不滚动类似于相对,滚动类似于固定
小知识:
1. 写定位的步骤
-
1.先确定定位模式
-
2.利用偏移值调整元素的位置
2. 利用定位实现居中
-
公式一:
-
1.子绝父相
-
2.水平居中:left:50%;margin-left:负的自身宽度的一半
-
3.垂直居中:top:50%,margin-top:负的自身高度的一半
-
-
公式二:
-
1.margin:auto;
-
2.子绝父相
-
3.4个方向归0
-