肯德基圣代中间空心

by Kevin Kononenko

凯文·科诺年科(Kevin Kononenko)

建造冰淇淋圣代解释CSS位置 (CSS Positioning Explained By Building An Ice Cream Sundae)

如果您之前做过冰淇淋圣代，那么您可以了解CSS的位置。 (If you’ve made an ice cream sundae before, then you can understand CSS positioning.)

Your divs are zooming around the screen like Roman candles.

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

They’re diving deep into their container, then coming back up to the surface like a whale.

他们正潜入容器中，然后像鲸鱼一样回到水面。

They’re pushing the other elements out of the way, then leaving the container entirely like an impatient businessman.

他们将其他要素排除在外，然后像一个急躁的商人一样完全离开了容器。

And somehow, this happens in a new and exciting way every time you change that one nasty line of CSS: the position property.

而且，每当您更改CSS的那一行讨厌的行： position属性时 ，都会以一种新颖而令人兴奋的方式发生。

Every single person who has learned CSS has been there. CSS positioning seems to be nonsensical until hours of trial and error finally give you a vague understanding.

每个学习过CSS的人都曾去过那里。 CSS的定位似乎是荒谬的，直到经过数小时的试验和错误终于使您模糊理解。

This post will end the confusion, once and for all. The position property doesn’t seem to have an obvious relation to any real-world concept… until you consider the humble ice cream sundae.

这篇文章将一劳永逸地结束混乱。 在您考虑不起眼的冰淇淋圣代之前，position属性似乎与任何现实概念都没有明显的关系。

We’ll cover the following position properties:

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

• Absolute绝对
• Static (default)静态(默认)
• Fixed固定
• Relative相对的

And, for the sake of clarity, an ice cream sundae will consist of 4 major components:

而且，为清楚起见，圣代冰淇淋将由4个主要部分组成：

• The glass玻璃
• Ice cream scoops冰淇淋勺
• Whipped cream鲜奶油
• Cherries樱桃

冰淇淋圣代HTML (The Ice Cream Sundae as HTML)

If you had to explain the structure of an ice cream sundae with HTML, it would probably look like this.

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

Or, in picture form:

或者，以图片形式：

Before we dive into CSS, we can make a couple observations:

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

1. The number of ice cream scoops is limited by the glass height. We cannot keep stacking ice cream scoops forever. Eventually, the whole beautiful setup would topple over.冰淇淋勺的数量受玻璃杯高度的限制。 我们不能永远堆叠冰淇淋勺。 最终，整个漂亮的设置将翻倒。
2. You can put the cherries wherever you darn please. Cherries do not obey the flow and stacking of the scoops.They are smaller, and can fit in nooks and crannies where you cannot fit an ice cream scoop. And, more cherries will not upset the order of the scoops.您可以将樱桃放到任何地方。 樱桃不服从瓢的流动和堆积，它们较小，可以放在无法容纳冰淇淋勺的角落和缝隙中。 而且，更多的樱桃不会破坏瓢的顺序。
3. The whipped cream sits on top, no matter how many scoops there are. Have you ever seen an ice cream sundae with the whipped cream in the middle, and none on top? Neither have I.无论有多少勺，打好的奶油都坐在上面。 您是否曾经见过冰淇淋圣代冰淇淋，中间夹着鲜奶油，而顶部却没有？ 我也没有。

位置相对/静态：玻璃和铲子 (Position Relative/Static: The Glass and Scoops)

As shown in the first picture, our leaning tower of ice cream can only hold 5 scoops before toppling over. Let’s say that these 5 scoops have a total height of 500 pixels, and each scoop sits directly on top of one another. Our fullSundae div, in that case, would have a height of 500px to indicate that it can only handle those 5 scoops, and no more. This is an example of the default position, static. We use this to show that the height is unrelated to any container div.

如第一幅图所示，我们的冰淇淋斜塔只能倒下5个勺子。 假设这5个瓢的总高度为500像素，并且每个瓢都直接位于另一个之上。 在这种情况下，我们的fullSundae div的高度将为500px，以表明它只能处理这5个瓢，而不能再处理了。 这是默认位置static的示例。 我们用它来表明高度与任何容器div无关。

The simple thing to do next would be to just give each iceCreamScoop a height of 100px, which would match the height of the fullSundae div. That would be no fun, because the glass div would be 300px by default. Let’s look at it another way.

接下来要做的简单事情是，将每个iceCreamScoop的高度设置为100px，这将与fullSundae div的高度匹配。 那不会很有趣，因为默认情况下glass div为300px。 让我们换一种方式来看。

Since the glass div contains three of the five scoops, and all scoops are equal height, we can see that the glass div is 60% of the height of the fullSundae div. This is an opportunity for position relative! You can set the glass div to position relative and give it a height of 60%. The glass div will look at the height of the entire fullSundae div, and take up 60% of that space. The percentage is relative to the height of the container div, which was stated explicitly as 500px.

由于玻璃div包含五个勺中的三个，并且所有勺都是相等的高度，因此我们可以看到玻璃div是整个圣代div高度的60％。 这是相对职位的机会！ 您可以将玻璃div设置为相对位置，并将其高度设置为60％。 玻璃div将看整个圣代div的高度，并占据该空间的60％。 百分比是相对于容器div的高度(明确表示为500px)而言的。

You can go even further. If you set each iceCreamScoop within the glass div to position relative, each scoop will calculate its height based on the height of the glass div. The glass can fit three scoops, so each scoop should have a height of 33.3%. Here is all of that in code.

您可以走得更远。 如果将玻璃div中的每个iceCreamScoop设置为相对位置 ，则每个瓢将基于玻璃div的高度计算其高度。 该玻璃杯可容纳三个勺子，因此每个勺子的高度应为33.3％。 这就是代码中的所有内容。

固定位置：鲜奶油 (Position Fixed: The Whipped Cream)

Position fixed should be the easiest one. A position fixed element will be stuck in place no matter how far the body extends. In ice cream terms, this is the whipped cream on top. No matter how many ice cream scoops that you try and stack, the whipped cream will still be on top, with the exact same relationship to the scoops. It is positioned relative to the body, not to the containing div.

固定位置应该是最简单的一种。 不管身体延伸多远， 位置固定元件都将卡在适当的位置。 用冰淇淋来讲，这是奶油在上面。 无论您尝试堆叠多少个冰淇淋勺，都将鲜奶油放在顶部，与勺的关系完全相同。 它相对于主体而不是相对于包含div的位置。

The whipped cream is independent of the series of ice cream scoops. The amount of whipped cream does not affect the maximum number of scoops that you can have in the full sundae. It stays in a consistent spot on the page.

搅打的奶油与冰淇淋勺系列无关。 鲜奶油的量不会影响您在完整圣代冰淇淋中可容纳的最大勺数。 它在页面上保持一致。

You commonly see position fixed in headers and footers. These are the elements that stick in position, even when you scroll the page or div.

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

绝对位置：樱桃 (Position Absolute: The Cherries)

There’s a reason I saved Position Absolute for last: it can lead to unmaintainable code if you use it too frequently. You have been warned. But, it works perfectly for the cherries in this example.

我之所以最后保存“绝对位置”是有原因的：如果您过于频繁地使用它，可能会导致代码无法维护。 你被警告了。 但是，在此示例中，它非常适合樱桃。

You can put cherries almost anywhere in this ice cream sundae. You can put a bunch on top, and it will not topple over. You can wedge them in the glass itself, and you will still be able to fit the same amount of ice cream. They do not obey the same rules as the position static and position relative elements. Furthermore, you can remove them without disturbing any other elements.

您可以将樱桃放在此冰淇淋圣代中的几乎任何位置。 您可以在上面放一束，它不会翻倒。 您可以将它们楔入玻璃杯中，仍然可以放入相同量的冰淇淋。 它们不遵循与位置静态元素和位置相对元素相同的规则。 此外，您可以删除它们而不会干扰任何其他元素。

These are the key components of position absolute. Position absolute elements do not disturb the placement of other elements, but you must state their position explicitly. If you do not, they default to the upper left corner of the body. Or, if one of their parents has position relative, they go to the top left corner of that div.

这些是绝对职位的关键组成部分。 位置绝对元素不会干扰其他元素的放置，但是您必须明确声明其位置。 如果不这样做，它们默认为主体的左上角。 或者，如果他们的父母中有一位是亲戚，他们将转到该div的左上角。

Check out this cherry-filled sundae. There are cherries added in a bunch of places, and they do not disturb the flow of the other elements. But, keep in mind that you cannot stack the cherries like you stack ice cream scoops. Cherries do not stack. You must place each explicitly.

看看这个充满樱桃的圣代冰淇淋。 在很多地方都添加了樱桃，它们不会干扰其他元素的流动。 但是，请记住，您不能像堆叠冰淇淋勺那样堆叠樱桃。 樱桃不堆积。 您必须明确放置每个。

One last note: position absolute is calculated based on the nearest parent that is NOT position static. If every parent is position static, it is calculated based on the entire body. So, in the case above, the cherries within the glass are positioned based on the height of the glass div, not based on the height of the fullSundae div. The glass div has position relative.

最后一点：绝对位置是根据不是位置静态值的最接近的父级来计算的。 如果每个父对象都是静态位置，则会基于整个身体进行计算。 因此，在上述情况下，玻璃中的樱桃是根据玻璃div的高度而不是整个圣代div的高度来定位的。 玻璃div具有相对位置。

Now go practice it, and when you feel a little more comfortable… you deserve some ice cream!

现在开始练习，当您感到更加舒适时……您应该得到一些冰淇淋！

EDIT: You can now build an ice cream sundae with CSS positioning in this interactive tutorial!

编辑：您现在可以在此交互式教程中使用CSS位置构建冰淇淋圣代！

Did you enjoy this post? Give it a “heart” so it can help others as well!

你喜欢这个帖子吗？ 给它一个“心”，这样它也可以帮助别人！

This post originally appeared on the CodeAnalogies blog.

该帖子最初出现在CodeAnalogies博客上 。

翻译自: https://www.freecodecamp.org/news/css-positioning-explained-by-building-an-ice-cream-sundae-831cb884bfa9/

肯德基圣代中间空心