CSS定位的三种机制：普通流、绝对定位和浮动

1.普通流：

• position : static – 元素框正常生成。即上述不对元素进行任何样式设置的默认形态。
• position : relative (此时设置top, right, bottom, left生效) – 相对于它的原点定位，元素仍保持其未定位前的形状，它原本所占的空间仍保留。

例如：

定位前：

定位后：

可以看出，div1相对于之前的位置，距离top偏移了40px，距离left偏移了60px。

注：top：40px指的是距上偏移40px，而不是向上偏移40px。

2.绝对定位：

• position : absolute – 将该元素从文档流中删除，原来的占位不再存在，并相对于其最近的已定位祖先元素定位（如果不存在已定位的祖先元素，则相对于其根祖先元素定位，即或<</span>canvas>）。不论该元素为块级元素还是内联级元素，定位后该元素将以块级元素的形式显示。

例如：

定位前：

定位后：

• position : fixed – 与absolute 大致相同，只是相对于当前视窗定位（即滚动条滑动时当前元素位置不会随之改变）。

注1：绝对定位的元素不在文档流中，因此会覆盖其他元素。

注2：设置当前元素position : absolute时，应将其父元素position : relative。

3.浮动：

• l float : left 或float : right –- 将元素从原来的占位中删除，向左或向右漂浮，直到碰到包含块的边框，或另一浮动元素的边框为止。不论该元素为块级元素还是内联级元素，定位后该元素将以块级元素的形式显示。

注：只有在position为static或relative，或继承了父元素的static或relative时，浮动才生效。

浮动场景：

• 浮动框总体宽度超过容器：浮动框块下移，直到有足够的空间

• 各浮动框高度不同：下移的浮动框有可能被“卡住”