CSS基础 position

布局position

MDN：position

static

1. 不脱离文档流，节点尺寸留白，放在未定位的位置。
2. 注意该布局下 top, right, bottom, left 和 z-index 属性无效。

relative（相对布局）

1. 不脱离文档流，节点尺寸留白，放在未定位的位置。
2. 自身静态位置可以通过 left top right bottom相对当前位置进行位移
3. 可以使用z-index设置层叠

absolute（绝对布局）

1. 元素会被移出正常文档流，并不为元素预留空间。
2. 相对于position不等于static的父节点布局
3. 绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。

fixed（固定布局）

1. 相对视口布局，
2. 元素会被移出正常文档流，并不为元素预留空间
3. 注意 父节点拥有translate、perspecive、filter的时候，固定布局就会相对于改父节点布局而不是相对视口布局

sticky（粘性布局）

1. 粘性布局，类似相对布局和固定布局的结合
2. 需要配合left top right bottom至少一个来使用（不会影响其他元素），是相对最近滚动的祖先粘性布局
3. 当滚动到指定位置如top:0px，即子元素相对最近滚动祖先元素顶部0px的时候就会固定在0px的位置
4. 注意的是，sticky是相对于最近拥有真实滚动机制的祖先节点，（而不是css属性导致的滚动），当该祖先的overflow 是 hidden, scroll, auto, 或 overlay时，就会抑制粘性布局的属性（不生效）

区别

static 和 relative的区别

1. relative可以使用left top right bottom 属性调整自身位置
2. relative可以使用z-index属性调整自身层级
3. 相同点： 不脱离文档流，节点尺寸留白，放在未定位的位置

relative 和 absolute 的区别

1. absolute节点不会留白
2. absolute脱离文档流
3. 相同点：可以使用left top right bottom 属性调整自身位置

absolute 和fixed 的区别

1. 正常情况下absolute相对非static节点布局，fixed相对视口布局(特殊清空fixed会相对拥有translate 或 perspective 或 filter属性的父节点布局)
2. 相同点：脱离文档流