Positionnement CSS : où pensez-vous aller exactement ?-tutoriel CSS-php.cn

✨
本文是我自己的网站上提供的更大系列文章的一部分。单击此处了解有关 CSS 101：系列的更多信息。完全免费！

欢迎来到 CSS 定位的神奇王国，在这里您可以为您的网页元素扮演架构师和设计师的角色！如果您想知道如何将该按钮准确地放置在您想要的位置，或者如何确保标题不会偏离，那么您来对地方了。让我们以一点智慧和一点乐趣来深入了解 CSS 定位的基础知识。

CSS Positioning: Where Exactly Do You Think You’re Going?

1. 静态定位：默认设置

静态定位就像电视上的默认设置。没有什么花哨的，只是基本和简单。默认情况下，所有元素都是静态定位的；这意味着它们按照您的预期在文档中流动 - 一个接一个。

雷雷

当您使用position: static;时，您实际上是在告诉浏览器将元素放置在其正常位置，就像自然的那样。这就是定位的“这里没什么可看的”

2. 相对定位：稍微狡猾的朋友

相对定位就像有一个总是有点格格不入但又充满魅力的朋友。它可以让您相对于正常位置移动元素，而不会干扰页面的其余部分。

雷雷

这里，.relative-box 将从original位置向下移动 10 像素，向右移动 20 像素。周围的其余元素仍会在原来的位置。

3. 绝对定位：自由追求者

绝对定位就像你的爱冒险的朋友，不随波逐流。它可以让您将元素定位在您想要的任何位置，相对于最近的“非静态”祖先（即位置为：相对、绝对、固定或粘性的祖先）。

雷雷雷雷

在此示例中，.child 将位于距 .parent 顶部 30 像素、距右侧 10 像素的位置。如果 .parent 不存在，它将相对于最近定位的祖先或视口进行定位。

专业提示?
当元素绝对定位在应用了变换的父级内部时，它是相对于变换后的父级定位的，而不是相对于原始文档流定位的。请注意这种行为，以避免意外的布局变化和定位问题。

4. 固定定位：顽固的静电

固定位置就像拥有一把你最喜欢的椅子，永远不会移动。它允许您相对于视口定位元素，因此无论您滚动多少，它都会保持在同一位置。

雷雷

使用位置：固定；，即使向下滚动，.floating-action-button 也将保持距视口底部 20 像素和距视口右侧 20 像素的距离。它非常适合那些粘性元素，例如网站标题、聊天小部件或持久的号召性用语按钮。

5. 粘性定位：两全其美

粘性定位就像有一个总是部分出现在聚光灯下或部分不在聚光灯下的朋友。您可以将其视为相对定位和固定定位之间的混合体。当您滚动经过某个点时，具有position: Sticky 的元素将粘在其容器内的位置，但在其他情况下，其行为就像相对定位的元素。

雷雷

在此示例中，一旦您滚动经过 .sticky-box，它就会粘在其容器的顶部，并在您继续滚动时保持在那里，但前提是容器处于视图中。当容器滚动到视图之外时，粘性元素将随之滚动。对于您希望在页面的特定部分中保持可见的标题、导航菜单或侧边栏来说，它非常有用。

Z-Index：优胜者

啊，z-index！这就是事情变得有点竞争的地方。当元素重叠时，z-index 确定哪一个位于顶部。就像高中人气大赛，不过是为了你的网页元素。

雷雷

在这种情况下，.box1 将出现在 .box2 上方，因为它具有更高的 z-index。请记住，z-index 仅适用于定位元素（相对、绝对、固定或粘性）。

专业提示?
z-index 的含义比上面解释的还要多。请继续关注“堆叠上下文”的深入研究，这将使您更全面地了解 z-index 在复杂布局中的工作原理。

Envelopper le tout

Le positionnement CSS peut sembler un casse-tête, mais une fois que vous aurez compris, vous placerez les éléments avec précision et style. Chaque type de poste a son propre rôle particulier dans la conception Web. Essayez-les et voyez comment vous pouvez donner à votre page Web un aspect parfait.

Bon codage !