位置：absolute;

元素相对于最近定位的祖先定位 （而不是相对于视口定位，如固定）。position: absolute;

然而;如果绝对定位的元素没有定位的祖先， 它使用文档正文，并随着页面滚动而移动。

注意：绝对定位的元素从正常流动中移除，并且可以与元素重叠。

下面是一个简单的示例：

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
}

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}

位置：sticky;

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

粘性元素在 position：fixed 和 relative fixed之间切换，具体取决于滚动位置。它是相对定位的，直到在视口中满足给定的偏移位置 - 然后它会“粘”在原位。

在此示例中，粘性元素会粘在页面顶部 （），当您到达其滚动位置时。top: 0

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4CAF50;
}

在图像中定位文本

如何在图像上放置文本：