9 定位position

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