现代 CSS 中减少绝对定位

Ahmad Shadeed 在博客中表达了这种观点，即我们可能不再像过去那样需要依赖 position: absolute。首先：堆叠元素。例如，如果您有一堆元素应该彼此叠放在一起…

.stack {
  display: grid;
}
.stack > * {
  grid-area: 1 / -1;
}

此时，所有元素都占据了同一个网格单元格，但您仍然可以使用对齐和对齐方式来移动元素，并使其看起来和运行起来符合您的预期。

当您使用 position: absolute 时，实际上是在说我希望这个元素完全从流中移除，这样它就不会影响其他元素，而其他元素也不会影响它。有时您确实需要这样做，但可以说，这并不像您现有的 CSS 肌肉记忆所认为的那样频繁。

我将借用 Ahmad 的一个想法

标签和标题的位置是我们可能自动想到使用绝对定位的方式。但同样，像 CSS Grid 这样的东西拥有我们需要的全部对齐功能，不仅可以垂直堆叠它们，还可以将它们放置在我们想要的位置。

直接链接 →