位置：相对困惑

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

网页的布局，以及它的响应性和可扩展性，是区分业余网站和专业网站的关键。我在“All Points Bulletin”论坛上收到的最早的问题之一，就是关于如何使用位置属性控制布局的：

position该属性的作用是什么？这些值absolute分别代表什么relative含义？

刚开始学习 CSS 的时候，我很容易被页面布局控制的各种选项搞糊涂。有 CSS Grid、Flexbox、浮动和纯定位。我经常搞不清楚哪些属性属于哪个类，比如想top在 Flexbox 列中使用某个属性，或者通过反复试验来尝试不同的值，比如用 `<div>` justify-content、align-items`<span>` 和 ` <span>` 来margin居中内容。

我发现，一个完整的网站通常包含各种各样的内容，熟悉基础知识是找出某个元素或一组元素为何没有按预期运行的有力工具。

位置属性

该position属性指定应用于元素的定位方法。

有5种可能的方法：

• 静止的
• 相对的
• 绝对
• 固定的
• 黏

一旦元素的position属性被设置为除默认设置之外的 任何值static，它就可以访问top、left和属性——我称之为位置属性。rightbottom

1️⃣位置：静态

默认情况下，网页上的元素以静态位置显示。它们根据浏览器的文档流和写入方式出现在视口中。某些浏览器会根据所选国家/地区和语言，以从左到右、从右到左或垂直向下的方式显示页面。

🙋‍♂️ 在这个例子中，客户要求我们创建一个简单的约会个人资料页面。最终的页面采用了基本结构——所有元素都按照我们希望的逻辑顺序从上到下排列，遵循一定的流程。

如果一个页面没有使用 CSS 来显式地改变元素的顺序或位置（即默认页面static），则称该页面处于正常流状态。

页面处于正常流程时，元素会按照代码中定义的顺序，以块级尺寸依次显示。当页面滚动时，元素也会随之滚动。

位置属性（top，，，和bottom）不会影响静态定位的元素。rightleft

2️⃣位置：相对

position当通过改变其定位方法（使用prop 而不是）来移动元素时display，它总是相对于某个东西（例如另一个元素或它自身）进行移动。

应用position: relative指向元素在正常流中位置的集合。起初看起来似乎没什么变化，这是因为元素只有在位置属性发出指令后才会移动。

🙋‍♂️ 沿用上面的例子，客户希望我们将他的头像居中显示在页面上。我们可以使用相对定位，但需要一些技巧。

该图像元素（类名为 `<image_name>` profile_pic）被赋予了相对定位，并向左移动了 35% 的位置。这并非使元素居中的最佳方法，但目前来说效果不错。

☝ 请注意！元素在正常流中占据的空间是预留的——周围的元素不会移动以适应或填充空白，也不会在其他地方为元素腾出空间。

3️⃣位置：绝对

对元素应用此操作position: absolute会将其及其通常占用的空间从文档流中完全移除。参考点设置为元素最近的已定位祖先元素，并创建一个新的堆叠上下文。此上下文允许我们访问该z-index属性。

如果元素没有定位祖先元素（即父元素的属性position不是静态/默认的），则引用指向文档主体（视口）。这是第一个容易让开发者感到困惑并导致布局错误的因素。

🙋‍♂️ 客户回复我们了——他很喜欢页面目前的布局，但想重新调整页面顶部。他要求把那个profile元素缩小一些，并居中放置在页面顶部。

div元素image被设置为居中position: relative，这使我们能够使用绝对定位技巧将其直接子元素（即图像元素）居中。

这个技巧的基本语法如下：

.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

☝ 需要注意的是，在使用一系列其他 CSS 定位和布局方法时，会创建一个堆叠上下文——通常默认值为 0。这可能会导致元素意外地落后于其他元素。我们将 div 的 z-index 设置image为 -1，使其远离用户，或在堆叠顺序中位于其他元素（例如导航栏）之后。

☝ 如果绝对定位的元素没有出现在预期位置，首先要确保该元素有一个定位的祖先元素。大多数情况下，我们不希望使用视口作为参考，即使需要使用，也最好使用其他方法，position: fixed我们稍后会看到。然后，确保定位的祖先元素是你期望的元素——如果需要，可以上下调整图层。

4️⃣位置：固定

固定定位允许元素根据视口进行定位。例如absolute，元素将完全从文档流中移除。通常top需要使用定位属性（例如 `position: absolute`）来显示该元素。

🙋‍♂️ 客户又来啦！他们带来了更多内容，还希望导航栏始终可见。我们会使用固定定位来实现这一点。

首先，我们为该nav元素添加了额外的样式规则，并应用了 ` position: fixedset_style_require` 和 `set_style_require`top属性left。这些规则指示浏览器将该元素显示得如同固定在左上角一样。

☝ 是否有其他元素出现在固定元素之上？请记住，当元素的position属性设置为 `true`absolute或 `false`时，会创建一个新的堆叠上下文。尝试将固定元素的 ` relativeoverflow: hidden` 设置为 1 或更大。z-index

☝ 虽然可以将固定元素的引用设置为视口以外的其他perspective对象，但这并非最佳实践。要实现这一点，包含该元素的父元素必须将`<div>` transform、`<div>` 或 ` filter<div>` 属性设置为除默认值 `<div>` 之外的任何值none。

5️⃣位置：粘性

最后一种定位方法有点混合性质——它在不同情况下既可以作为相对定位元素，也可以作为固定定位元素。带有position: sticky切换开关的元素在正常显示时位于页面底部，直到用户滚动到某个特定位置后才会变为固定定位。

🙋‍♂️ 客户对我们目前的工作非常满意，最后他希望在页面上添加一个联系电话。他要求这个号码要醒目且易于用户找到。我们将使用固定定位，确保用户随时都能联系到 Jack。

该phone_number元素被添加到文档顶部，样式采用了类似 Windows 95 的微妙风格，并设置了固定位置。用户首次访问页面时，它会位于导航栏下方；但随着用户滚动页面阅读更多内容，它会固定在页面中央，始终显示在用户视野范围内。

☝ 粘性值是较新的功能，因此跨浏览器兼容性较差。不过不必过于担心，即使粘性方法不受支持，元素也会恢复为固定位置并随用户滚动。此外，WebKit Sticky 扩展程序或许有所帮助。

关于正常流量的一点说明

良好的文档结构是无障碍设计不可或缺的一部分。结构清晰的文档对于永远不会看到我们精心设计的 CSS 的用户至关重要，但对于会看到 CSS 的用户来说也同样重要。

正常的阅读流程是基于读者自然浏览和阅读内容的方式。如果某个元素需要移动到与正常阅读流程中位置相距较远的地方，我们首先应该考虑调整它在文档中的位置。

CSS positionprop 是控制页面元素布局的强大工具，但它也并非完美无缺，一些隐藏的细节可能会导致难以解决的错误和奇怪的行为。我建议您尝试修改示例中的代码，移除position父元素，或者尝试新的元素，看看它们的堆叠方式。

🔍 如果你仍然好奇——请查看下面的资源部分！我总能在那里找到很多很棒的文章来解答自己的疑问。

资源：

• CSS布局入门，《Smashing Magazine》
• CSS布局：position属性，w3schools
• 职位，MDN
• CSS：position 属性，网络技术
• 堆叠上下文，MDN
• 关于 Z 指数，没人告诉过你的事，菲利普·沃尔顿
• 详细定位，谢伊·豪

一如既往，感谢阅读🦄