position

CSS position属性用于指定一个元素在文档中的定位方式。

定位类型：

  • 定位元素（positioned element）是其计算后位置属性为 relative, absolute, fixed 或 sticky 的一个元素（换句话说，除static以外的任何东西）。
    • 相对定位元素（relatively positioned element）是计算后位置属性为 relative 的元素。
    • 绝对定位元素（absolutely positioned element）是计算后位置属性为 absolute 或 fixed 的元素。
    • 粘性定位元素（stickily positioned element）是计算后位置属性为 sticky 的元素。

取值：

  • static：该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
  • relative：该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。top, right, bottom, left等调整元素相对于初始位置的偏移量。
  • absolute：元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
  • fixed：元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。
  • sticky：元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先 nearest block-level ancestor)，包括table-related元素，基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。
  1. /* relative 实例*/
  2. .div-outer {
  3.     width: 300px;
  4.     height: 400px;
  5.     background-color: lightblue;
  6. }
  8. .div-inner1 {
  9.     width: 100px;
  10.     height: 100px;
  11.     background-color: darkred;
  12.     color: white;
  13.     margin: 10px;
  14.     display: inline-block;
  15. }
  17. .div-inner2 {
  18.     width: 100px;
  19.     height: 100px;
  20.     background-color: darkgreen;
  21.     color: white;
  22.     margin: 10px;
  23.     display: inline-block;
  24.     position: relative;
  25.     top: 30px;
  26.     right: 100px;
  27. }
  29. .div-inner3 {
  30.     width: 100px;
  31.     height: 100px;
  32.     background-color: darkred;
  33.     color: white;
  34.     margin: 10px;
  35.     display: inline-block;
  36. }
  39. /* absolute 实例*/
  40. .div-inner2 {
  41.     width: 100px;
  42.     height: 100px;
  43.     background-color: darkgreen;
  44.     color: white;
  45.     display: inline-block;
  46.     position: absolute;
  47.     top: 100px;
  48.     left: 20px;
  49. }
  52. /* fixed 实例*/
  53. .div-inner2 {
  54.     width: 100px;
  55.     height: 100px;
  56.     background-color: darkgreen;
  57.     color: white;
  58.     display: inline-block;
  59.     position: fixed;
  60.     top: 200px;
  61.     right: 20px;
  62. }
  64. /* sticky 实例*/
  65. .div-inner1 {
  66.     width: 100px;
  67.     height: 100px;
  68.     background-color: darkred;
  69.     color: white;
  70.     margin: 10px;
  71.     position: sticky;
  72.     top: 0;
  73. }
  75. .div-inner2 {
  76.     width: 100px;
  77.     height: 1000px;
  78.     background-color: darkgreen;
  79.     color: white;
  80.     margin: 10px;
  82. }
  84. .div-inner3 {
  85.     width: 100px;
  86.     height: 100px;
  87.     background-color: darkred;
  88.     color: white;
  89.     margin: 10px;
  90.     position: sticky;
  91.     bottom: 10px;
  92. }