position

描述

position 属性指示元素使用的定位类型（静态、相对、绝对或固定）。与 position 属性一起使用 CSS 属性，例如 top、right、bottom 和 left；它们允许您相对于某个边缘偏移定位的元素。

效果展示

语法

position: static | relative | absolute | sticky | center | page | fixed;

值

• static 该关键字让元素使用正常行为，即它布置在流中的当前位置。顶部、右侧、底部和左侧属性不适用。
• relative 该关键字对所有元素进行布局，就好像该元素未定位一样，然后调整元素的位置，而不更改布局（从而为元素在未定位时的位置留下间隙）。
• absolute 不要为元素留出空间。相反，将其定位在相对于其最近定位的祖先或包含块的指定位置。绝对定位的盒子可以有边距，它们不会与任何其他边距折叠。
• sticky 盒子位置是根据正常流计算的（这称为正常流中的位置）。然后，该框相对于其流根和包含块进行偏移，并且在所有情况下，包括表元素，都不会影响任何后续框的位置。
• center 框的位置（以及可能的大小）由 top、right、bottom 和 left 属性指定。框在其包含块内垂直和水平居中，这些属性指定相对于框在其包含块内的中心位置的偏移。
• page 盒子的位置是根据“绝对”模型计算的。
• fixed 不要为元素留出空间。相反，将其放置在相对于屏幕视口的指定位置，并且在滚动时不会移动。打印时，将其定位在每页的固定位置。

  注意

  当父元素存在 transform: scale(1); 或 will-change: transform; 时，fixed 会相对于父元素。