关于元素定位的核心概念
构建块
CSS 采用盒子模型来处理每一个 HTML 元素，盒子可以是一个 “块级” 盒子，也可以是一个 “内联” 盒子
包含元素
如果一个块级元素位于另一个块级内部，那么这个外部的框就成为父元素
控制元素的位置
CSS 中包含三种用于控制页面布局的定位机制：普通流 | 相对定位 | 绝对定位。
- 普通流
- 相对定位
- 绝对定位 (脱离标准流)
- 固定定位 (脱离标准流)
- 浮动元素 (脱离标准流)
任何元素从普通流脱离时，盒子会产生重叠。可以使用 z-index 属性来控制将哪个盒子显示在上层
定位流
绝对定位
position:absolute
绝对定位不区分块级元素 / 行内元素 / 行内块级元素，可以设置宽 高
规律
- 默认情况下所有绝对定位的元素，无论有没有祖先元素都会以 body 作为参考点
- 绝对定位的元素祖先元素也是定位流，那么这个绝对定位的元素就会以那个祖先元素作为参考点
- 定位流指 绝对定位 / 相对定位 / 固定定位 (唯有静态定位不行)
- 绝对定位的祖先元素也是定位流， 而且祖先元素中有多个元素都是定位流，那么这个绝对定位的元素会以离它最近的那个定位流祖先元素为参考点
牢记
子绝父相
注意
- 绝对定位的元素若以 body 为参考点，其实是以网页首屏的宽度和高度作为参考点，而不是以整个网页的宽度和高度作为参考点
- 一个绝对定位的元素会忽略祖先元素的 padding 属性
相对定位
position:relative
- 相对定位是相对于自己以前在标准流中的位置来移动
- 相对定位是不脱离标准流的，会在标准流中占一份空间
- 同一个方向上的定位属性只能使用一个
- 相对定位区分块级元素 / 行内元素 / 行内块级元素
- 相对定位设置 margin/padding 属性是根据未定位之前的位置移动的
固定定位
position:fixed
固定定位与背景关联方式很像
背景定位 (background-attachment:fixed)可以让背景图片不随着滚动条的滚动而滚动
固定定位 (position:fixed) 可以让某个盒子不随着滚动条的滚动而滚动
注意
- 固定定位的元素脱离标准流，不占用标准流的空间
- 固定定位和绝对定位一样不区分行内 / 块级 / 行内块元素
补充
z-index属性。z-index 属性的作用是专门用于控制定位流元素的覆盖关系的- 默认情况定位流的元素会覆盖标准流的元素
- 定位流的元素会盖住前面的定位流
- 如果两个元素的父元素都没有设置 z-index 属性，那么谁的 z-index 属性大 谁就显示在上面
- 如果两个元素的父元素设置了 z-index 属性，子元素的 z-index 属性就失效
