有几种定位方式？分别是如何实现定位的？参考点是什么？使用场景是什么？

Posted 2020-12-14 qinglaoshi

CSS 有三种基本的定位方式：文档流、浮动和定位。

• 文档流(normal flow)： 文档流是所有元素布局的基础，作为从左到右、从上到下的布局方式，这是最常用的一种排版布局方式。

• 浮动(float)：float:left/right；浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。适用于实现文字环绕图片和多列布局。

• 定位(position)有以下四种方式：

定位方式	实现方式	使用场景
static	默认布局，按照文档流定位；	默认布局；
relative	相对于元素自身正常位置进行定位，元素在文档流中仍占据原来空间，只是表现出来的位置会相对原来的位置偏移；	适用于层叠效果；
absolute	绝对定位，相对于有定位属性的第一个父元素偏移，absolute定位元素会脱离文档流；	适用于小区块的布局使用频繁
fixed	相对浏览器窗口定位，设置的偏移属性，是相对于浏览器窗口的位置。	适用于广告等意图一直出现在用户眼前的信息。