精通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__不起作用。

例如,下面的topleft毫无作用。

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

fixedabsolute非常类似,不过它的__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;
}

参照資料