一、标准流布局

• 默认情况下，元素都是按照normal flow（标准流）进行排布
  • 从左到右、从上到下的顺序
  • 默认情况下，互相之间不存在层叠现象
  • 块级元素独占一行，行内元素与其他行内元素在一行显示
• 标准流中，margin、padding可以对元素进行定位，但是会影响其他元素，也不便于元素层叠的效果
• position属性对元素进行定位，可使其脱离标准流

二、元素定位

1. 认识元素定位

允许从正常的文档流布局中取出元素，并使它们具有不同的行为

2. 认识position属性

• static
  • 默认值，静态定位
  • 按照normal flow布局，left、right、top、bottom没有任何作用
  • 不是定位元素
• relative：相对定位
• absolute：绝对定位
• fixed：固定定位
• sticky：粘性定位

三、相对定位

• 按照normal flow布局
• 可以通过left、right、top、bottom进行定位
  • 定位参照对象是自己原来的位置
• 应用场景
  • 在不影响其他元素位置的前提下，对当前元素进行微调

四、固定定位

• 元素脱离normal flow
• 可以通过left、right、top、bottom进行定位
  • 定位参照对象是视口
  • 当画布滚动时，固定不动
• 视口和画布
  • 视口 文档的可视区域
  • 画布 用于渲染文档的区域 文档内容超出视口范围，可以通过滚动查看
  • 画布 >= 视口

四、绝对定位

• 元素脱离normal flow
• 可以通过left、right、top、bottom进行定位
  • 定位参照物是最邻近的定位祖先元素
  • 如果找不到这样的祖先元素，参照对象是视口
• 子绝父相
  • 在绝大多数情况下，子元素的绝对定位都是相对于父元素进行定位
  • 如果希望子元素相对于父元素进行定位，又不希望父元素脱标：通常将父元素position设置为relative，子元素position设置为absolute

五、绝对定位元素的特点

绝对定位元素是指将position设置为absolute/fixed的元素

• 可以随意设置宽高
• 宽高默认由内容决定
• 不再受标准流的约束
  • 不再严格按照从上到下、从左到右排布
  • 不再严格区分块级、行内级、行内块级，很多特性都会消失
• 其他：
  • 定位参照对象的宽度 = left + right + margin-left + margin-right + 绝对定位元素的实际占用宽度
  • 定位参照对象的高度= top + bottom + margin-top + margin-bottom + 绝对定位元素的实际占用高度
  • 如果希望绝对定位元素的宽高于定位参照对象一样，可以给绝对定位元素设置left、right、top、bottom都为0
  • 如果希望绝对定位元素在定位参照对象中居中显示，可以给绝对定位元素设置left、right、top、bottom都为0，margin为auto，且必须设置具体的宽高值

六、粘性定位

• 是相对定位和固定（绝对）定位的结合体

七、z-index

• 是用来设置定位元素的层叠顺序
• 比较原则
  • 如果是兄弟关系： z-index越大，层叠在越上面；z-index相等，写在后面的那个元素层叠在上面
  • 如果不是兄弟关系： 各自从元素自己以及祖先元素中，找出最邻近的2个定位元素进行比较。而且这2个定位元素必须设置z-index的具体数值