绝对定位、相对定位、堆叠顺序

1. 定位

1.1. 定位属性

• 属性: position
• 取值: 1. static: 静态定位 默认的 2. relative: 相对定位 3. absolute: 绝对定位 4. fixed: 固定定位

注意: 除 static 以外, 其它定位都称之为**"已定位元素"**

1.2. 偏移属性

• 作用: 为了改变元素的位置
• 只有**"已定位的元素"**才能用, 非已定位元素用不了
• 取值:
  1. top: 以上边为基准边移动元素( 上下移动 )
     • 取值为正, 元素下移
     • 取值为负, 元素上移
  2. bottom: 以下边为基准边移动元素( 上下移动 )
  3. left: 以左边为基准边移动元素( 左右移动 )
     • 取值为正, 元素右移
     • 取值为负, 元素左移
  4. right: 以右边为基准边移动元素( 左右移动 )

2. 定位方式

2.1. 相对定位

• 定义: 元素会相对它原来的位置偏移某个距离
• 属性: position
• 取值: relative
  • 配合偏移属性实现位置的改变
  • 行内元素和行内块元素用比较合适
• 场合: 位置微调
  • 配合着 绝对定位元素 实现位置
• 特点: 1. 元素原本所占据的空间依然会被保留 2. 被定位元素支持 margin, 块级元素支持 auto

2.2. 绝对定位( 关联定位 )

• 特点: 1. 绝对定位的元素会脱离文档流( 不占空间 ) 2. 绝对定位的元素也是通过偏移属性来控制固定位置 3. 绝对定位的元素会相对于它最近的已定位的祖先元素 来实现位置的初始化
  • 最近的
  • 已定位的: relative, absolute, fixed
  • 祖先元素: 父元素以及无限的父元素
  4. 如果没有已定位的祖先元素, 那么就会相对于最初的包含块( body或 html )实现定位 ( 设计网页时, 一般会把 body 默认的外边距给去掉 )
• 使用场合: 所有的弹出框都是关联定位
• 语法:
  • 属性: position
  • 取值: absolute: 配合 偏移属性 实现定位位置
• 特点 & 注意: 1. 会脱离文档流, 所以能压在其他元素上 2. 绝对定位元素会变成块级元素 3. 绝对定位元素 默认情况下 margin: auto 会失效，其他正常 4. 绝对定位元素支持 margin, 不支持 auto 5. 特殊情况下: top: 0; right: 0; bottom: 0; left: 0; margin: auto; 能够实现既水平由垂直的居中效果( 面试 )

2.3. 堆叠顺序

• 已定位的元素( 尤其是绝对定位 )允许出现堆叠效果, 可以通过堆叠顺序改变堆叠效果
• 属性: z-index
• 取值: 无单位的数值 数越大, 越靠上

注意: 1. 默认情况下, 后来者居上

2. 父子关系的元素是不受堆叠顺序影响的 永远都是子压在父上
3. 非已定位元素, 无法做层叠修改

2.4. 固定定位

• 语法:
  • 属性: position
  • 取值: fixed
    • 配合偏移属性 实现位置移动
• 特点: 1. 固定定位永远都是相对于 body 实现定位的 2. 固定定位元素会脱离文档流 3. 固定定位元素会变成块级元素