定位（position）

 定位知识体系概览：

• 元素的定位属性
  • 边偏移
  • 定位模式（定位的分类）
• 静态定位（static）
• 相对定位（relative）
• 绝对定位（absolute）
  • 父级没有定位
  • 父级有定位
  • 子绝对定位 父相对定位（子绝父相）
  • 绝对定位水平垂直居中
• 固定定位（fixed）
• 叠放次序（z-index）
• 四种定位总结
• 定位模式转换

 

元素的定位属性

• 元素的定位属性主要包括 定位模式 和 边偏移两部分。

边偏移

 

定位模式（定位的分类）

• 在CSS中，position 属性用于定义元素的定位模式，基本语法格式如下：

选择器 {
  position：属性值；      
}

position属性的常用值

 

静态定位（static）

• 网页中默认的就是静态定位；
• 对于边偏移无效；
• 一般用来清除定位；
• 相对于文档流（HTML）

相对定位（relative）

• 相对定位 可以通过边偏移移动位置，但是原来所占的位置，移动后继续占有；
• 相对定位 移动时 是以自己的左上角为基点移动的（相对于自己来移动位置）
• 相对定位不脱离 标准流（即占有位置）
• 浮动的主要目的是 让多个块元素在一行显示，那么定位就是 移动位置。

 

绝对定位（absolute）

• 绝对定位 是 完全脱离 标准流的（即不占位置）

父级没有定位

• 如果父级元素没有添加定位，那么绝对定位 是以 浏览器 为基准点对齐（document文档）；

父级有定位

• 如果父级元素有定位，那么绝对定位 是以 最近的父级元素 为基准点对齐；

子绝对定位 父相对定位（子绝父相）

• 父级元素相对定位；不脱离 标准流；占有位置
• 子级元素绝对定位；完全脱离 标准流；不占位置

绝对定位水平垂直居中

• 绝对定位中 margin：0 auto；无效；
• 水平居中：
• 首先通过  left：50%；走父级元素宽度的一半；
• 然后通过 margin-left：-width px 走自己宽度的一半；
• 垂直居中：
  • 首先通过  top：50%；走父级元素宽度的一半；
  • 然后通过 margin-top：-height px 走自己宽度的一半；

固定定位（fixed）

• 固定定位 是 绝对定位 的一种特殊形式；
• 固定定位 以 浏览器窗口 作为基准点 来定义网页元素；
• position：fixed；
• 脱离 标准流，始终依据 浏览器窗口 来定义自己的显示位置；不管浏览器如何滚动、窗口大小如何变化，该元素都会始终显示在浏览器窗口的固定位置；
• 固定定位有两点：
  • 固定定位的元素 跟父级元素没有任何关系，只认浏览器；
  • 固定定位完全脱离标准流，不占位置，不随着滚动条滚动；

 

叠放次序（z-index）

• 当对多个元素进行定位时，可能会出现叠加；想要调整重叠定位元素的堆叠顺序，可以对定位元素应用 z-index 层叠等级属性；
• 注意：
  • z-index 默认值为0，取值越大，定位元素在层叠元素中越居上；
  • 取值相同时，则根据书写顺序，后来者居上；
  • z-index：属性值；属性值一定不能加单位；
  • 只有 相对定位，绝对定位 和 固定定位 有z-index 属性，其余标准流、浮动、静态定位都无此属性，亦不可指定此属性；

 

四种定位总结

 

定位模式转换

• 跟浮动相同，元素添加了 绝对定位 和 固定定位 后，元素模式也会发生转换，都转为行内块模式；
• 如果 行内元素 添加了 绝对定位 和 固定定位，那么就不需要再对行内元素进行 display 模式转换，而 直接设置宽高；