精通 CSS 之 position

HTML的“正常”布局称为 document flow，在这种 normal flow 下，元素按照从左到右（inline block）、从上到下（block）进行排列。

position 则打破了 normal flow。

我们把元素的父节点（ancestor）称为 containing block。

position有五个取值：

static
absolute
fixed
relative
sticky

同时有四个属性依附于position，它们表示距离边界（edge of contaning block）的 offset，因为我们称之为 offset properties。

top
bottom
right
left

static

static 是默认值，标记了 position: static 的元素依然会遵守 document flow，因此 offset properties 不起作用。

例如，下面的 top、left 毫无作用。

div.dlg {
  position: static;
  top: 20px;
  left: 10px;
}

absolute

absolute 是相对于它的 containing block，但是 containing block 必须有 position 修饰，并且 position 的取值不能是 static，兜底的 contaning block 是body。

absolute 会让元素脱离 document flow，并且不会保留它原本在 normal flow 里的 gap。

fixed

fixed 与 absolute 非常类似，不过它的 containing block 是 view port，也就是说，absolute 的元素会固定在可见区域的某个位置，无论页面如何滚动，它的位置不会改变。

relative

relative的“相对”是相对于 normal flow，offset properties 作用于它原本在 normal flow 下的位置。

relative 并没有脱离 document flow，只会在原有位置的基础上有了 offset，因此它会在原本的位置上留下 gap。

sticky

sticky 表示在滑动之后将元素固定于某个位置，它的 containing block 必须用 overflow: scroll 来修饰。

#scrollbox {
  overflow: scroll; 
  width: 15em; 
  height: 18em;
}

#scrollbox h2 {
  position: sticky; 
  top: 2em; 
  bottom: auto;
  left: auto; 
  right: auto;
}

参照資料

CSS Layout - The position Property
O’REILLY - Positioning in CSS

feelang