CSS Position 属性详解

在屏幕上定位元素时，你需要了解两种重要的属性。第一个属性是position:，它指定元素的定位方法类型（例如，静态、相对、绝对或固定）。

第二组属性 (top:, bottom:, right:, left:) 用于指定元素的偏移量。根据所使用的定位方法，top、bottom、right 和 left 的计算方式不同，如果使用position: static，则这些属性会被忽略。

CSS 中的position属性定义了元素在页面上的定位方式。top、right、bottom和left属性决定了定位元素的最终位置。

静态定位

静态定位元素始终根据页面的正常流程进行定位。HTML 元素默认定位为静态。静态定位元素不受 top、bottom、left、right 和 z-index 属性的影响。在以下示例中，绿色框“B”具有静态定位。

.static {
  position: static;
  /* This is often not needed since HTML elements have a static position by default */
}

相对定位

这与静态定位类似，不同之处在于您可以使用顶部、右侧、底部、左侧来相对于自身定位它。

相对定位是指元素相对于默认静态定位时的位置进行移动。如果你给一个元素设置了相对定位，并指定它的 top 为 40px，它就会从原本的位置向下移动 40px。

.relative {
  position: relative;
  top: 40px;
  left: 30px;
}

上面的 CSS 改变了 Box-B 的位置，如下所示。

绝对定位

绝对定位告诉浏览器，被定位的元素应该脱离文档的正常流程，并将根据顶部、底部、左侧和右侧指定的值放置在页面上的准确位置。它不会影响 HTML 中它之前或之后的元素在网页上的定位方式。

绝对元素将默认前往具有非静态位置的最近父元素的左上角。

.absolute {
  position: absolute;
  top: 10px;
  right: 0px;
}

固定定位

固定元素相对于整个 HTML 元素定位。

固定定位与绝对定位类似，但固定定位将元素锚定在浏览器窗口中。如果您上下滚动，即使其他元素滚动过去，固定元素仍会保持不变。

.fixed {
  position: fixed;
  top: 20px;
  right: 30px;
}

粘性定位

粘性位置是相对位置和固定位置的组合。它开始时是相对的，但一旦滚动出页面，它就会变成固定位置。

注意： Internet Explorer、Edge 15 及更早版本不支持粘性定位。Safari 需要使用 -webkit- 前缀（参见下方示例）。您还必须至少指定 top、right、bottom 或 left 中的一个才能使粘性定位生效。

.sticky {
  position: sticky;
  position: -webkit-sticky;
  top: 20px;
  right: 30px;
}

这里有一个 Codepen，其中包含了其他位置，包括 Sticky。向下滚动即可查看 Sticky 位置的实际效果。

就这样吧，大家下周见！