如何用现代CSS减少绝对定位

121 阅读1分钟

艾哈迈德-沙迪德在博客中表示,我们可能不需要像过去那样倚重position: absolute 。因为有一点:堆叠元素。例如,如果你有一叠元素,这些元素应该都在彼此的上面:

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

在这一点上,所有的元素都占据了同一个网格单元,但你仍然可以使用对齐和调整来移动东西,让它看起来和表现出你想要的样子。

你用position: absolute ,其实是在说 *我想把这个元素从流程中完全删除。*这样,它就不会影响其他元素,而其他元素也不会影响它。有时你会这样做,但可以说比你现有的CSS肌肉记忆所相信的要少。

我在这里引用Ahmad的一个想法。

CodePen 嵌入回退

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