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时，浮动才生效。
浮动场景：
- 浮动框总体宽度超过容器：浮动框块下移，直到有足够的空间
- 各浮动框高度不同：下移的浮动框有可能被“卡住”
时间： 2024-08-30 03:53:27