CSS 中有 3 种定位机制：普通流、绝对定位、浮动。除非专门指定，否则所有框都在普通流中定位。

普通流

css中元素主要有两种：块元素、行内元素，使用display可修改元素的属性。

块元素从上到下一个接一个垂直排列，行内元素在一行中水平排列。

行内元素可以使用水平内边距、边框和外边距调整它们的水平间距，但是垂直内边距、边框、外边距不影响行业元素的高度。不过设置行高可以修改这个行内元素的高度。

CSS允许把元素的display属性设置为inline-block。这个声明让元素像行内元素一样水平依次排列，但是能够显示地设置宽度、高度、垂直内边距和外边距。

相对定位

通过设置垂直或水平位置，使元素相对于该元素的起点移动。在使用相对定位时，无论是否移动，元素仍然占据原来的空间，仍然是普通流定位中的一部分。

image.png

绝对定位

绝对定位的元素是相对于距离它最近的那个已定位的祖先元素确定的。如果元素没有已定位的祖先元素，则相对于初始包含块定位。绝对定位的元素与普通流无关，不占据空间。

image.png

z-index

绝对定位的元素可以覆盖页面上的其他元素，可以通过设置 z-index 属性来控制这些框的叠放次序。z-index值越高，框在栈中的位置就越高。

固定定位

固定定位是绝对定位中的一种，差异在于固定定位的包含块是窗口。

浮动

浮动框可以所有移动，直到碰到它的外边缘或另一个浮动框的边缘。浮动框不在文档的普通流中。

image.png

浮动会让元素脱离文档流，不再影响不浮动的元素。如果浮动的元素后面有一个文档流中的元素，那么这个元素的框会表现的浮动根本不存在一样。但是，框的文本内容会收到浮动元素的影响，移动以流出空间。浮动元素旁边的行框被缩短，从而给浮动元素流出空间，因此行框围绕浮动框。创建浮动框使文本可以围绕图像。

image.png