CSS 定位：元素放置的终极指南

大家好，欢迎回到我的博客！ ？

无论您是经验丰富的开发人员还是刚刚接触 CSS，本文都会为您提供一些额外的知识和示例！

CSS 定位简介

CSS 定位决定了元素将出现在文档流中的位置。默认情况下，所有元素都遵循自然流从左到右、从上到下，这称为静态定位

。然而，CSS 提供了四种其他定位模式，允许对元素放置进行更多创造性的控制。

静态定位 - 默认行为

当元素具有position: static（默认）时，它会根据页面的正常流程*进行定位。将其视为一个接一个排列的元素，无需特别注意它们在自然文档结构之外的位置。

示例：

.static-element { position: static;}

正常流程：元素按照从左到右、从上到下的顺序依次布局，除非通过浮动、弹性盒或网格进行修改。

？很高兴知道

：

• 块元素

  ：它们垂直堆叠，每个新元素从最后一个元素下方开始。

• 内联元素

  ：它们水平流动，仅占用其内容所需的宽度。

相对定位 - 视角的转变

相对定位

相对于其正常位置移动元素，而不改变其周围的布局。这就像将元素稍微偏离其原始位置，但在文档流中保留其空间。

示例：

.relative-element {
    position: relative;
    top: 10px; /* Moves the element down by 10 pixels */
    left: 20px; /* Moves the element to the right by 20 pixels */
}

？很高兴知道

：相对定位很简单，但经常被误解：

• 保留空间

  ：保留元素在布局中的原始空间。

• 偏移

  ：使用上、右、下、左将其从正常位置移动。

绝对定位-自由精神

绝对定位

从文档流中完全删除元素。然后，它将其相对于其最近的定位祖先进行定位，或者，如果没有，则相对于初始包含块（通常是 元素）。

示例：

.absolute-element {
    position: absolute;
    top: 50px;
    left: 50px;
}

？很高兴知道：

<script> // Detect dark theme var iframe = document.getElementById('tweet-1848997429565149264-1'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1848997429565149264&theme=dark" } </script>

• 从 Flow 中移除：不影响其他元素的位置。
• 相对于定位祖先：如果没有定位祖先，则它与初始包含块（通常是）相关。

固定位置 - 固定到屏幕

具有固定定位的元素相对于视口定位。当页面滚动时它们不会移动，这使得它们非常适合导航栏或弹出窗口等元素。

示例：

.static-element { position: static;}

？很高兴知道：

• 不滚动：它们保持在原位，忽略滚动位置，这对于标题或通知来说非常有用。

粘性定位 - 适应用户滚动

粘性定位 开始时像静态一样流动，但在满足滚动阈值时可以变得固定。它非常适合您希望在滚动时保持在视图中的标题。

示例：

.relative-element {
    position: relative;
    top: 10px; /* Moves the element down by 10 pixels */
    left: 20px; /* Moves the element to the right by 20 pixels */
}

？很高兴知道：

• 开始静态：直到达到阈值，然后变得固定。

常见误解和提示

• 过度使用绝对：虽然功能强大，但过度使用绝对定位可能会导致布局问题，尤其是在内容调整大小或元素意外重叠时。
• 带有定位的 Z-Index：记住，定位元素可以使用 z-index 来控制堆叠顺序，但 z-index 只适用于定位元素。
• 固定元素的性能：太多固定元素会影响性能，尤其是在固定元素可能无法正确重排的移动设备上。
• 滚动和固定元素：谨慎使用可能覆盖内容的固定元素。始终为用户提供一种与这些元素背后的页面交互的方式。

一个实际例子

让我们创建一个布局来演示每种定位类型。

？也可以在 CodePen 上找到示例。

.absolute-element {
    position: absolute;
    top: 50px;
    left: 50px;
}

.fixed-element {
    position: fixed;
    bottom: 0;
    right: 0;
}

此示例展示了每种定位方法的实际应用。当您滚动或调整窗口大小时，您会注意到元素的行为有何不同。

先进技术和注意事项

• Z-Index：虽然我们提到了它，但让我们更深入地探讨一下。 Z-index 仅适用于定位元素（相对、绝对、固定），并且堆叠上下文可能使其行为变得复杂。
• 组合位置：有时，一个元素可能需要相对和绝对定位来实现不同的目的

• 响应式设计：考虑不同位置在屏幕尺寸上的表现。已修复可能会覆盖较小屏幕上的重要内容。

• 辅助功能：确保固定或粘性元素不会阻碍屏幕阅读器或键盘导航。

使用实际应用进行练习

如果你想练习你的技能，你可以尝试构建这些：

• 导航元素：固定或粘性页眉或页脚。
• 工具提示或模态：相对于父容器绝对定位。
• 视差效果：将固定位置的背景与滚动内容相结合。

粘性标题及更多 ~ 示例

这是一个演示导航元素（固定页眉、粘性页脚）、工具提示（绝对定位）和简单视差效果的示例：

？找到完整代码并在Codepen上查看结果。

CSS 定位技术 ~ 示例

您可以在下面看到的示例演示了使用 HTML 和 CSS 的不同 CSS 定位技术。

？找到完整代码并在Codepen上查看结果。

.static-element { position: static;}

• 固定标题 :
  
  演示位置：固定，无论滚动如何，标题都会保持在视口的顶部。

• 静态元素 :
  
  显示元素在正常文档流中出现的默认位置。

• 相对和绝对元素 :
  
  相对盒是一个相对定位的容器，里面有一个绝对定位的元素。此结构演示了绝对元素如何相对于其最近的定位祖先（在本例中为相对框）定位自身。

• 粘性元素 :
  
  使用position:sticky，它开始时是静态的，但当达到一定的滚动阈值时会变得固定。
  

.relative-element {
    position: relative;
    top: 10px; /* Moves the element down by 10 pixels */
    left: 20px; /* Moves the element to the right by 20 pixels */
}

• Body：设置较高的高度以允许滚动，这是演示不同定位类型的效果所必需的。

• 固定标题：样式始终保持在顶部，并带有蓝色背景以提高可见性。

• 容器：为其中的定位元素提供一些上下文。

• 静态、相对、绝对、粘性元素：每个元素都有不同的样式，以在视觉上区分其定位行为：

• 正常文档流中仍存在静态。

• 相对从其正常位置移动，但仍占据布局中的原始空间。

• 绝对相对于相对框定位，这演示了绝对定位如何在已定位的父级中工作。

• 粘性开始于静态位置，但一旦滚动超过其定义的阈值，就会“粘住”。

结论

给你了！您现在已经掌握了精确定位元素的知识，将您的网页设计从基本变为令人惊叹。请记住，熟能生巧，所以深入到您的项目中并开始尝试 CSS 定位。快乐编码！

---

？大家好，我是 Eleftheria，社区经理、 开发人员、公共演讲者和内容创建者。

？如果您喜欢这篇文章，请考虑分享。

？ 所有链接 | X | 领英

以上是CSS 定位：元素放置的终极指南的详细内容。更多信息请关注PHP中文网其他相关文章！