css元素定位

[TOC]

标准流

默认情况下，元素都是按照 normal flow（标准流、常规流、正常流、文档流【document flow】）进行排布

• 从左到右、从上到下按顺序摆放好
• 默认情况下，互相之间不存在层叠现象

position

• 默认值

  • static 默认值，静态的

    元素按照 normal flow 布局 left 、right、top、bottom 没有任何作用

• 使用下面的值, 可以让元素变成 定位元素(positioned element)

  • relative：相对定位
  • absolute：绝对定位
  • fixed：固定定位
  • sticky：粘性定位

相对定位 - relative

• 可以通过 left、right、top、bottom 进行定位 定位参照对象是元素自己原来的位置

  总结:在标准流中复制一个大小相同的空元素占据原位置，将源元素脱离标准流

固定定位 - fixed

完全脱离标准流 相对于视图窗口定位 当画布滚动时，固定不动

画布与视口的区别

视口

• 文档的可视区域
• 如右图红框所示

画布（Canvas）

• 用于渲染文档的区域
• 文档内容超出视口范围，可以通过滚动查看
• 如右图黑框所示

宽高对比

画布 >= 视口

绝对定位

脱离标准流

• 如果父元素没有设置定位则相对于视口
• 相对最邻近的祖先的定位元素

position absolute 与 fixed 特点

• 可以随意设置宽高
• 宽高默认由内容决定
• 不再受标准流的约束
• 不再给父元素汇报宽高数据
• 脱标元素内部默认还是按照标准流布局

对于绝对定位元素来说

• 定位参照对象的宽度 = left + right + margin-left + margin-right + 绝对定位元素的实际占用宽度
• 定位参照对象的高度 = top + bottom + margin-top + margin-bottom + 绝对定位元素的实际占用高度

auto 并不是设置居中，而是将属性交给浏览器来设置

粘性定位 - sticky

ie11 之前不支持 可以看做是相对定位和固定(绝对)定位的结合体

• 它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点;
• 当达到这个阈值点时, 就会变成固定(绝对)定位;

sticky 是相对于最近的滚动祖先包含滚动视口的(the nearest ancestor scroll container’s scrollport )

position 值对比

	脱离标准流	定位元素	绝对定位元素	定位参考对象
static – 静态定位	×	×	×	×
relative – 相对定位	×	√	×	元素自己原来的位置
absolute – 绝对定位	√	√	√	最邻近的定位祖先元素 （如果找不到这样的祖先元素，参照对象是视口）
fixed – 固定定位	√	√	√	视口

z-index

• z-index 属性用来设置定位元素的层叠顺序（仅对定位元素有效）
  • 取值可以是正整数、负整数、0
• 比较规则
• 如果是兄弟关系 ✓ z-index 越大，层叠在越上面 ✓ z-index 相等，写在后面的那个元素层叠在上面
• 如果不是兄弟关系 ✓ 各自从元素自己以及祖先元素中，找出最邻近的 2 个定位元素进行比较 ✓ 而且这 2 个定位元素必须有设置 z-index 的具体数值