肯德基圣代中間空心

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之前，我們可以做一些觀察：

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.
冰淇淋勺的數量受玻璃杯高度的限制。我們不能永遠堆疊冰淇淋勺。最終，整個漂亮的設置將翻倒。
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.
您可以將櫻桃放到任何地方。櫻桃不服從瓢的流動和堆積，它們較小，可以放在無法容納冰淇淋勺的角落和縫隙中。而且，更多的櫻桃不會破壞瓢的順序。
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博客上 。