CSS中有三种定位机制：普通流、浮动、绝对定位。除非专门指定，否则所有的框都在普通流中定位。普通流中元素框的位置由元素在HTML中的位置决定。
注：下面做的操作都是基于一下这张图进行的

相对定位(relative)
如果一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素相对于它的起点移动(注：在使用相对定位时，无论是否移动，元素仍然占据原来的空间。因此，移动元素会导致覆盖其它的框)。因此，相对定位实际上被看做是普通流定位模型的一部分，因为元素的位置是相对于它在普通流中的位置的。
如下图：

.div1 {
    position: relative;
    left: 20px;
    top: 20px;
  }

绝对定位
绝对定位使元素的位置与文档流无关，因此不占据空间。普通文档流的其它元素的布局就像绝对定位的元素不存在一样。

绝对定位的元素的位置是相对于离它最近的已定位的祖先元素而确定的。如果元素没有已定位的祖先元素，那么它的位置是相对于初始包含块的。可能是画布或HTML元素。

由于绝对定位的框与文档流无关，所有它们可以覆盖页面上的其它元素(如下图)。可以通过z-index属性来控制这些框的叠放次序。z-index值越高，框在栈中的位置就越高。

.div1 {
    position: absolute;
    left: 20px;
    top: 20px;
  }

固定定位
固定定位是绝对定位的一种，也是要脱离文档流。差异在于固定元素的包含块是视口(viewport)。这使我们能够创建总是出现在窗口中相同位置的浮动元素。

浮动
浮动的框可以左右移动，直到它的外边缘碰到包含框或另一个浮动框的边缘。因为浮动的框不在文档的普通流中，所有文档的普通流中的块框表现的就像浮动的框不存在一样。

如下图，当把div1向右浮动的时候，它脱离文档流并向右移动，直到它的右边缘碰到包含框的右边缘。

当div1向左浮动时，它脱离文档流并向左移动，直到它的左边缘碰到包含框的左边缘。实际上覆盖住了div2，使div2从视图中消失。

如果把所有div都向左浮动，那么div1向左浮动直到碰到包含框，另外两个div向左浮动直到碰到前一个div。

如果包含块太窄，无法容纳水平排列的3个浮动元素，那么其它浮动块向下移动，直到有足够空间的地方。

如果浮动元素的高度不同，那么当它们向下移动的时候可能会被其它浮动元素“卡住”。

最后更新于 2018-07-09 06:27:39 并被添加「HTML CSS」标签，已有 1824 位童鞋阅读过。

相关文章

• H5页面遇到的一些坑