精通CSS之position

keywords

  • document flow
  • containing block
  • offset properties

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毫无作用。

1
2
3
4
5
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来修饰。

1
2
3
4
5
6
7
8
9
10
11
12
#scrollbox {
  overflow: scroll; 
  width: 15em; 
  height: 18em;
}
#scrollbox h2 {
  position: sticky; 
  top: 2em; 
  bottom: auto;
  left: auto; 
  right: auto;
}

参照資料