了解 CSS Position 的不同搭配

本文最初发表于 freeCodeCamp。
封面照片由Tom Hermans在Unsplash上拍摄。

当你开始学习 CSS 时，position 属性可能会让你感到有些神秘。这就像你拿到一组看起来相似但味道却截然不同的未知香料，而且它们之间的组合并不总是能达到预期的效果。

本文旨在描述它们之间最佳且最常见的搭配，以便您在首次进行网络烹饪时轻松运用它们。就像我们在厨房里学到的那样——欧芹和大蒜很搭，但和肉桂就不太搭了。

了解属性

首先，让我们定义一下每个位置变量的含义：

静止的

这是每个 HTML 元素默认的布局。这意味着元素将根据正常的文档流进行定位。块级元素将保持全宽，内联元素将对齐。这基本上是所有元素的精华所在。

相对的

具有相对位置的元素可以相对于它们在正常文档流中占用的空间进行放置。它们仍然只占用该空间，但支持top、right和bottom属性left。
您为这些属性赋的任何值都将用于根据其实际位置边界计算其显示位置。就像加点胡椒粉一样，这通常不会造成太大的损害。

绝对

这一点比较棘手——有点像孜然，可以作为很好的补充，但必须谨慎使用。绝对元素脱离了正常的文档流。这意味着它们不会影响页面中的其他元素，也不会受到其他元素的影响。但是，它们会相对于其最近的已定位祖先元素进行定位（是的，我知道，请耐心听我说完）。这意味着任何明确设置了位置的父元素。它也可以使用top、right和进行微调。因此，它类似于相对定位，但是，由于它不再是文档流的一部分，因此它使用父元素作为参考。bottomleft

固定的

啊，这个很简单。固定元素根本不属于文档流，它们的位置基于整个窗口（有时也称为视口）。而且，它们不受滚动影响。

开始烹饪前的快速提示

当您使用、和时，不建议使用marginand/or 。后者会偏移元素的可见位置，而前者会偏移其实际位置和影响文档的位置。paddingtoprightbottomleft

如果在同一个元素上使用两者，事情可能会变得混乱，因此最好将它们分开。

那么，我们怎样才能将它们混合在一起呢？

position: relative;当您想将某个元素从其正常位置稍微偏移，但又不想其他元素随之移动时，可以使用。请记住，所有其他元素的行为都将视为该元素未移动。使用、和可top将right其调整到其原本的自然位置。bottomleft

position: absolute;当您关心元素相对于其第一个父元素或包装器的位置，且该父元素具有明确的（通常是相对的）位置时使用。请注意，position 属性不支持 cascade，因此它将使用最近的、具有明确位置声明的父元素；如果没有，则使用<body>。如果您想强制使用 cascade 属性，可以将其声明为position: inherit;。

请记住，此元素的位置由其最近定位的父元素的大小和形状定义，因此如果您更改它，此元素也可能会受到影响。

最后，position: fixed;还有一件有趣的事情可以尝试一下。通常的用法包括粘性导航栏、页脚或侧边菜单。记住，它不属于正常的文档流，所以这意味着：

你可以把它放在任何你想要的地方，而且不会损坏任何东西
这也意味着它不会做任何你没有明确告诉它做的事情，所以你需要设置它的 2 个坐标才能显示出来。

这两个坐标（即顶部或底部，加上左侧或右侧）将从窗口边缘开始测量。

（提示：上下滚动👇）

置顶免责声明

还有一个我没有介绍的选项，那就是position: sticky;。它使元素的行为和滚动正常，但随后会停留在某个位置，而其余内容则继续滚动。我决定不介绍它，因为它仍处于实验阶段，超出了本文的理解范围。但是，如果你感兴趣，这里有一篇文章可以解释它的全部内容。

我计划通过研究来解决许多我从未完全理解的 Web 开发基础知识，并通过撰写相关文章来检验我的新知识。所以，请期待我未来对基础知识的更多深入解读！

鏂囩珷鏉ユ簮锛�https://dev.to/anabella/understanding-the- Different-pairings-of-css-position-flavors-5855