通过制作圣代冰淇淋来解释 CSS 定位

如果您以前做过圣代冰淇淋，那么您就可以理解 CSS 定位。

您的 div 就像罗马蜡烛一样在屏幕上缩放。

它们潜入容器深处，然后像鲸鱼一样浮出水面。

他们将其他元素推开，然后像一个不耐烦的商人一样完全离开容器。

不知何故，每次您更改 CSS 中那一行令人讨厌的代码：position 属性时，这种情况就会以一种新的、令人兴奋的方式发生。

每个学过 CSS 的人都经历过这种情况。CSS 定位看起来毫无意义，直到经过几个小时的反复尝试才最终让你有了模糊的理解。

这篇文章将一劳永逸地结束这种困惑。位置属性似乎与任何现实世界的概念没有明显的关系......直到你考虑到不起眼的圣代冰淇淋。

我们将介绍以下位置属性：

• 绝对
• 静态（默认）
• 固定的
• 相对的

为了清楚起见，冰淇淋圣代由四个主要部分组成：

• 玻璃
• 冰淇淋勺
• 鲜奶油
• 樱桃

HTML 格式的圣代冰淇淋

如果您必须用 HTML 解释圣代冰淇淋的结构，它可能看起来像这样。

或者，以图片形式：

在深入研究 CSS 之前，我们可以做几点观察：

1. 冰淇淋勺的数量受玻璃杯高度的限制。我们不可能一直把冰淇淋勺堆在一起。最终，整个漂亮的装置都会倒塌。
2. 你可以把樱桃放在任何你想放的地方。樱桃不服从冰淇淋勺的流动和堆叠。它们个头较小，可以塞进冰淇淋勺放不下的角落和缝隙里。而且，樱桃放得再多也不会打乱冰淇淋勺的顺序。
3. 无论有多少勺，奶油都会浮在最上面。你见过圣代冰淇淋中间有奶油，上面却没有奶油吗？我也没见过。

相对/静态位置：玻璃杯和勺子

如第一张图片所示，我们的冰淇淋斜塔只能容纳 5 勺冰淇淋，否则就会倾倒。假设这 5 勺冰淇淋的总高度为 500 像素，并且每个冰淇淋勺都直接叠放在另一个冰淇淋勺上。在这种情况下，我们的 fullSundae div 的高度将为 500px，以表明它只能容纳这 5 勺冰淇淋，不能再多了。这是默认位置 **
static** 的一个示例。我们使用它来表明高度与任何容器 div 无关。

接下来要做的简单的事情就是将每个 iceCreamScoop 的高度设为 100px，与 fullSundae div 的高度一致。但这不太好，因为玻璃杯 div 的默认高度是 300px。让我们换个角度来看。

由于玻璃杯 div 包含五个冰淇淋球中的三个，并且所有冰淇淋球的高度都相同，因此我们可以看到，玻璃杯 div 的高度是全圣代 div 高度的 60%。这正好可以利用相对定位！您可以将玻璃杯 div 设置为相对定位，并将其高度设置为 60%。玻璃杯 div 的高度将与全圣代 div 的高度相同，并占据其中 60% 的空间。这个百分比是相对于容器 div 的高度而言的，容器 div 的高度明确设置为 500px。

你还可以更进一步。如果你将玻璃杯 div 中的每个 iceCreamScoop 设置为相对定位 (position relative)，那么每个冰淇淋勺的高度都会根据玻璃杯 div 的高度计算。玻璃杯可以容纳三个冰淇淋勺，因此每个冰淇淋勺的高度应该是 33.3%。以下是所有代码。

固定位置：鲜奶油

位置固定应该是最简单的一种。无论 body 元素延伸多远，位置固定的元素都会固定在原处。用冰淇淋的术语来说，这就像放在最上面的奶油。无论你尝试堆叠多少个冰淇淋球，奶油仍然会位于最上面，与冰淇淋球的位置关系完全相同。它是相对于 body 元素定位的，而不是相对于包含它的 div 定位的。

鲜奶油的量与冰淇淋勺的数量无关。鲜奶油的量不会影响整份圣代冰淇淋中冰淇淋勺的最大数量。它在页面上的位置保持一致。

您通常会在页眉和页脚中看到固定位置。即使滚动页面或 div，这些元素也会固定在原位。

绝对位置：樱桃

我把 Position Absolute 留到最后是有原因的：如果使用过于频繁，可能会导致代码难以维护。我已经警告过你了。但是，在这个例子中，它对樱桃来说效果很好。

你可以把樱桃放在这个冰淇淋圣代的几乎任何地方。你可以把一串樱桃放在顶部，它也不会翻倒。你可以把它们塞进杯子里，这样仍然可以装下同样数量的冰淇淋。它们不遵循与静态定位元素和相对定位元素相同的规则。
此外，你可以移除它们而不会干扰任何其他元素。

这些是绝对定位 (position absolute)的关键组成部分。绝对定位元素不会干扰其他元素的放置，但你必须明确声明它们的位置。如果你不这样做，它们会默认位于 body 的左上角。或者，如果它们的父元素之一具有相对定位 (positionrelative)，它们会位于
该 div 的左上角。

看看这个樱桃圣代。樱桃被添加到很多地方，而且它们不会干扰其他元素的流畅性。但是，请记住，你不能像堆叠冰淇淋勺那样堆叠樱桃。樱桃不能堆叠。你必须明确地放置每个樱桃。

最后一点：绝对位置是根据最近的父元素（非静态位置）计算的。如果所有父元素都是静态位置，则绝对位置是根据整个主体计算的。因此，在上面的例子中，玻璃杯中的樱桃是根据玻璃杯 div 的高度定位的，而不是根据 fullSundaediv 的高度定位的。玻璃杯 div 具有相对位置。