HTML布局原理

html布局——position属性

标签： position relative absolute fixed 默认 个人分类： 前端 position定位有4个属性，分别是static，absolute，relative，fixed

1.static(默认）

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

2.relative（相对定位）

此处的相对并不是相对于哪个父p或子p，相对只是相对于自身原本的位置发生变化。

3.absolute（绝对定位）

absolute定位是布局中最常用到的定位，其生成的位置是相对于带有position属性的父（父...)级来定位；

如果父级都没有position属性，则相对于document来定位；

使用absolute定位后，定位元素是脱离文档流的，这时候父级会检测不到定位元素的宽高。inline元素使用absolute定位之后，可以对其设置宽高；

元素是不可以同时使用绝对定位和浮动的。

4.fixed（固定定位--相对于窗口）

生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定.

?

也是脱离了文档流，与absolute一样，可以设置宽高，但是父级会检测不到定位元素的宽高，所以无法由子元素撑开。

元素是不可以同时使用fixed定位和浮动的。