CSS关于定位position

定位Position

1. relative : 相对自身之前在文档流中的位置发生偏移，且原来的位置仍然被占据。发生偏移时，可能覆盖其他元素。body默认是relative 子绝对父相对
2. absolute：元素脱离文档普通流，不在占有文档位置，相对于包含块进行偏移（包含块：最近的Position不为static的祖先元素）
3. fixed：绝对定位，相对于视窗进行定位，不占有文档流位置
4. static：默认值（初始值）
5. sticky：CSS3新增属性粘性定位，相当于relative和fixed的结合，元素在跨越特定阈值前为相对定位，之后为固定定位。粘性定位续指定top、bottom、left、right四个阈值之一才能生效，否则其与相对定位相同 常用于定位字母列表的头元素

文档流

普通流

普通流其实就是指BFC中的FC。 FC(Formatting Context)，直译过来是格式化上下文，是页面中的一块渲染区域，决定了子元素如何布局，以及和其他元素之间的关系和作用。在普通流中，元素按照其在HTML中的向后位置按顺序进行布局，在这个过程中，行内元素(inline)元素水平排列，直到占满换行。块级元素则会被渲染为一个完整的新行，除非另外指定，否则所有元素默认都是普通流定位，或者说，普通流中元素的位置由该元素在HTML文档中的位置决定

定位流

元素的属性Position为absolu，就是一个定位元素

在绝对定位中，元素会脱离普通流，因此绝对定位元素不会对兄弟元素造成影响，而元素的具体位置由绝对定位的坐标决定

对于postion：absolute元素，元素定位相对于上级元素中最近的一个position为relative、 fixed、 absolute，如果没有则相对于body

对于position：fixed，正常来说相对于具有滚动机制的祖先元素定位，没有则是浏览器窗口定位，但是当元素祖先的transfrom属性非none时，会相对于该祖先进行定位