Anchor Positioning 基础

In this article, I will cover the basics of Anchor Positioning and how I wish I had learned it earlier. Please use Chrome on a desktop or laptop if you want to try the interactive demos. If not, I’ve attached a video for most of the demos.
在本文中，我将介绍 Anchor Positioning 的基础知识，以及我多么希望自己能早点学会它。如果你想体验交互式演示，请使用桌面或笔记本电脑上的 Chrome。如果不行，我为大多数演示都附上了视频。

When learning CSS, you most likely came across the position property and how to position an element outside of its normal flow.

学习 CSS 时，你很可能接触过 position 属性，以及如何将元素移出正常流进行定位。

.parent { position: relative;
} .child { position: absolute; left: 0; top: 0;
}

While this works, it has limitations:

尽管这可行，但它仍有局限：

We can’t position the child element relative to anything other than its parent.
我们无法将子元素相对于除其父元素之外的任何元素进行定位。
If the child is set to position: relative (for example, to adjust its z-index), we can’t position it relative to an outer parent.
如果子元素被设置为 position: relative（例如为了调整其 z-index），我们就无法让它相对于外层父级进行定位。
You might need to restructure the HTML, which is not ideal.
你可能需要重新调整 HTML 结构，这并不理想。

The problem

What’s better than facing an actual problem and trying to solve it with position: absolute? Let’s start.

还有什么比面对一个真实问题，并用 position: absolute 去解决它更好的呢？让我们开始吧。

Here we have a simple card component that contains an image, title, description, and a category tag.

这里有一个简单的卡片组件，包含图片、标题、描述和分类标签。

<div class="card"> <div class="card-thumb"> <img src="thumb.jpg" alt="Coffee" /> </div> <div class="card-header"> <a href="#" class="tag">Coffee</a> <p class="card-title">...</p> <p class="card-desc">...</p> </div>
</div>

Coffee

The art of making cafe-quality coffee at home

在家制作咖啡馆级咖啡的艺术

Learn how to make the best coffee at home, by following some simple steps.

通过遵循一些简单步骤，学习如何在家制作最好的咖啡。

I want to position the category tag on top of the image, what should I do? Let’s add position: absolute to the category tag.

我想把分类标签放在图片上方，该怎么做？给分类标签加上 position: absolute。

.cardTag { position: absolute; left: 0; top: 0;
}

Coffee

The art of making cafe-quality coffee at home

在家制作咖啡馆级咖啡的艺术

Lear...