position fixed脱离文档流吗_CSS——position属性

今天给大家介绍一下css的position属性，在一些元素的定位上经常会使用到这个属性进行定位......

一

relative

生成相对定位的元素，相对于其正常位置进行定位。例如：left：100px；则表示当前元素从左向右移动100px。

特点：

1、 如果没有定位偏移量，对元素本身没有任何影响

2、 不使元素脱高文档流

3、 不影响其他元素布局

4、 left、top、 right、 bottom是相对于当前元素自身进行偏移的

二

absolute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

特点：

1、使元素完全脱离文档流

2、使内联元素支持宽高(让内联具 备块特性)

3、使块元素默认宽，根据内容决定(让块具备内联的特性)

4、如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移(绝对、相对、固定)

三

fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定，像一些网页上固定在一个位置的小广告，无论窗口怎么移动，在可视窗口都是那个位置。

特点：

1、使元素完全脱离文档流

2、使内联元素支持宽高(让内联具 备块特性)

3、使块元素默认宽根据内容决定( 让块具备内联的特性)

4、相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响

编辑｜有芳

审核｜有芳

微信公众号｜一只前端猿