position中的absolute与relative的区别

Position（位置）属性值需要注意的地方

position的属性有：

1. Absolute：绝对定位，是相对于最近的且不是static定位的第一个父元素来定位，元素位置通过“right”“top”“left”“bottom”属性进行规定。
   

2. Fixed：绝对定位，是相对于浏览器窗口来定位的，是固定的，不会跟屏幕一起滚动
   

3. Relative：相对定位，是相对于其原本的位置来定位的
   

4. Static：默认值，没有定位
   

5. Inherit：继承父元素的position值。
   

absolute和relative的区别

relative设置的div宽度和父类的div宽度相同，所以给子类一定宽度时，父类随之变化。
而absolute不会。

relative特点：

 1）不影响元素本身的特性；
 2）不使元素脱离文档流（元素移动之后原始位置会被保留）；
 3）如果没有定位偏移量，对元素本身没有任何影响；
 4）提升层级。

absolute特点：

 1）使元素完全脱离文档流；
 2）使内嵌支持宽高；
 3）块属性标签内容撑开宽度；

 4）如果有定位父级相对于定位父级发生偏移，没有定位父级相对于document发生偏移；

 5）相对定位一般都是配合绝对定位元素使用；
 6）提升层级

文档流概念：

• 将窗体自上而下分成一行行， 并在每行中按从左至右的顺序排放元素，即为文档流。 每个非浮动块级元素都独占一行，
• 浮动元素则按规定浮在行的一端。 若当前行容不下， 则另起新行再浮动。 内联元素也不会独占一行。
• 几乎所有元素(包括块级，内联和列表元素）均可生成子行， 用于摆放子元素。
• 有三种情况将使得元素脱离文档流而存在，分别是浮动，绝对定位， 固定定位。 但是在IE6中浮动元素也存在于文档流中。