CSS

精通CSS之position

Posted by liangfei on 2017-08-24

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

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

absolute

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

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

fixed

fixedabsolute非常类似,不过它的containing blockview port,つまり,absolute的元素会固定在可见区域的某个位置,无论页面如何滚动,它的位置不会改变。

relative

relative的“相对”是相对于normal flowoffset 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;
}

参照資料


欢迎扫码关注 老梁写代码 微信公众号