CSS 定位：你认为你到底要去哪里？

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

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

1. 静态定位：默认设置

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

div {
    position: static;
}

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

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

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

.relative-box {
    position: relative;
    top: 10px;
    left: 20px;
}

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

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

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

<div class="parent">
    <div class="child"></div>
</div>

.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 30px;
    right: 10px;
}

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

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

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

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

.floating-action-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

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

5. 粘性定位：两全其美

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

.sticky-box {
    position: sticky;
    top: 0;
}

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

Z-Index：优胜者

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

.box1 {
    position: absolute;
    z-index: 10;
}

.box2 {
    position: absolute;
    z-index: 5;
}

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

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

总结一下

CSS 定位可能看起来像一个谜题，但一旦掌握了它的窍门，您就能精确而巧妙地放置元素。每种职位类型在网页设计中都有其特殊的作用。尝试一下，看看如何让您的网页看起来恰到好处。

编码愉快！

✨
嘘！如果您喜欢所读内容，请单击此处查看 CSS 101：系列。完全免费！

以上是CSS 定位：你认为你到底要去哪里？的详细内容。更多信息请关注PHP中文网其他相关文章！