CSS 定位：元素放置的终极指南-css教程-PHP中文网

CSS Positioning: Your Ultimate Guide to Element Placement

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

无论您是经验丰富的开发人员还是刚刚接触 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;
}

登录后复制

？很高兴知道：

从 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 */
}

登录后复制