HTML-CSS 定位（position）

position 属性

position 属性规定应用于元素的定位方法的类型：

先使用position属性设置定位方法类型，再使用 top、bottom、left 和 right 属性给元素定位。

position: static;

HTML 元素默认情况下的定位方式为 static（静态）。

静态定位的元素不受 top、bottom、left 和 right 属性的影响。

使用position: static;的元素始终根据页面的正常流进行定位：

position: relative;

使用position: relative; 的元素相对于其正常位置进行定位。

设置相对定位的元素的 top、right、bottom 和 left 属性来使其偏离其原来位置进行调整。原来的位置即使空出来了，也依旧占有，不会被其他元素占据。

position: absolute;

使用position: absolute; 的元素相对于最近的使用相对定位（relative）的祖先元素进行定位。

如果绝对定位的元素没有祖先，将使用文档主体（body）并随页面滚动一起移动。

position: fixed;

使用position: fixed; 的元素是相对于视口定位的。
这意味着即使滚动页面，它也始终位于同一位置。

position: sticky;

使用position: sticky; 的元素根据用户的滚动位置进行定位。

粘性元素可以理解为根据滚动位置在相对（relative）和固定（fixed）之间切换。

位置重叠

在对元素进行定位时，它们可以与其他元素重叠。

可以通过z-index 属性指定元素的（z轴）堆栈顺序。

实例：

img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}