06.定位属性区别以及文档流和文本流

参考
Position的属性和属性值及差别

定位属性区别

Position的四个属性 ：

1. relative：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。

2. absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。

3. fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。

4. static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

Position属性的差别

1. position:relative，static;不会脱离文档流，position: fixed;position: absolute;会脱离文档流
2. position: relative; 相对于自己在文档流中的初始位置偏移定位。
3. position: fixed; 相对于浏览器窗口定位(窗口变化，位置也变化)。
4. position: absolute; 是相对于父级非position:static 浏览器定位。

---

文档流和文本流

参考HTML 的文档流和文本流分别是什么

1. 文档流是相对于盒子模型讲的
2. 文本流是相对于文子段落讲的
3. 元素浮动之后，会让它跳出文档流，也就是说当它后面还有元素时，其他元素会无视它所占据了的区域，直接在它身下布局。但是文字却会认同浮动元素所占据的区域，围绕它布局，也就是没有拖出文本流。
4. 但是绝对定位后，不仅元素盒子会拖出文档流，文字也会出文本流。那么后面元素的文本就不会在认同它的区域位置，会直接在它后面布局，不会在环绕。当然你可以使用index-z来让底部的元素到上面来，类似于一个图层的概念。

小结

• 定位的absolute，fixed属性值，都会脱离文档流和文本流，reletive，static不会脱离文档流，浮动会脱离文档流，不会脱离文本流，所以文字可以围绕浮动的元素。

• 向左浮动
  

• position: absolute，fixed都是这效果