CSS: Positioning

20th August 2020 at 2:19pm
CSS

CSS Reference 有非常好的 带图示例。MDN 提供了各种值的 具体含义。下面是一些重点总结。

每个元素都有默认的 position 属性,值为 static,这使它 positioned。设置任一非 static 值使其 positioned。仅当元素 positioned 时,这些属性会对它起作用:

  • top
  • bottom
  • left
  • right
  • z-index

positionstaticrelative 时,元素在页面上自然排列。

当元素的 positionrelative 时,

  • 该元素成为 positioned,可以作为子元素使用 absolute 时的 closest positioned ancestor。这种是最常见的情况
  • 如果同时设置了 top, bottom 等定位属性,该元素在页面中占用的空间不会变,但是会有所偏移

positionfixed 时,经常用于 navbar 或者 footer 场景中。

未研究 sticky 的使用场景,似乎比较少见。