css定位机制（布局）

css定位机制由三种：普通文档流、定位、浮动。

1，普通文档流：块级元素从上往下排列，行级元素从左到右排列。

 

2，定位：position属性可以对元素进行定位，有四个类型，static,relative,absolute,fixed

static：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

relative：当设置了偏移值之后，元素相对于自身进行偏移，仍旧保持未偏移前的形状，但是它依然保留原来所占空间。

absolute：元素定位后生成一个块级框，并从文档流中完全删除，不再占空间，偏移是相对离它最近的一个已经定位过的祖先元素，如果没有，则是body。

fixed：元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

 

3，浮动：元素设置float属性可以向左或右浮动，脱离里普通文档流，不占据空间。却是占据视图位置，会挡住在他下面的元素。浮动元素会生成一个块级框，而不论它本身是何种元素。

 

转载于:https://www.cnblogs.com/lubenxin/p/7101064.html