原文： How to use the position property in CSS to align elements
在 Web 开发中使用 CSS 定位元素并不像看起来那么容易。随着你的项目变得越来越大，事情会很快变得复杂，并且如果没有很好地理解 CSS 如何处理对齐 HTML 元素，你将无法解决对齐问题。
使用纯 CSS 定位元素有不同的方式/方法。使用 CSS float、display 和 position 属性是最常用的方法。
在本文中，我将解释使用纯 CSS 对齐元素的最令人困惑的方法之一：position 属性。我还有一个关于 CSS display 属性的教程。
如果你愿意，可以观看 CSS 定位教程的视频版本：
让我们开始吧......
CSS Position & Helper 属性
所以 position 属性有 5 个主要值：
position: static | relative | absolute | fixed | sticky
以及用于设置元素坐标的附加属性（我称它们为“辅助属性”）：
top | right | bottom | left 以及 z-index
重要提示：如果没有声明的 position，或者使用 position: static，辅助属性将不起作用。
z-index 是什么
我们有高度和宽度（x，y）作为二维。 Z 是第三维。随着元素的 z-index 值的增加，这个元素位于其他元素的前面。
Z-index 不适用于 position: static 或没有声明 position 的情况。
你可以在我的频道上观看视频，以了解如何更详细地使用 z-index：
现在让我们继续使用 position 属性值......
1. Static
position: static 是默认值。不管我们声明与否，元素在网页上的位置都是正常的。举个例子：
首先，我们定义 HTML 结构：
<body>
<div class="box-orange"></div>
<div class="box-blue"></div>
</body>然后，我们创建 2 个盒子并定义它们的宽度、高度和位置：
.box-orange { // 没有声明任何 position
background: orange;
height: 100px;
width: 100px;
}
.box-blue {
background: lightskyblue;
height: 100px;
width: 100px;
position: static; // 声明为 static
}
正如我们在图片中看到的，定义 position: static 与否没有任何区别。这些框根据正常的文档流定位。
2. Relative
position: relative：元素相对于其正常位置的新位置。
从 position: relative 开始，对于所有非静态位置值，我们可以使用我上面提到的辅助属性来更改元素的默认位置。
让我们将橙色框移到蓝色框旁边。
.box-orange {
position: relative; // 我们现在准备移动元素
background: orange;
width: 100px;
height: 100px;
top: 100px; // 相对于其旧位置，距顶部 100px
left: 100px; // 距左侧 100px
}
注意：对一个元素使用 position: relative 不会影响其他元素的位置。
3. Absolute
在 position: relative 中，元素相对于自身定位。但是，绝对定位的元素是相对于其父元素的。
具有 position: absolute 的元素会从正常的文档流中被移除。它会自动定位到其父元素的起点（左上角）。如果它没有任何父元素，那么初始 document <html> 将是它的父元素。
由于 position: absolute 会从文档流中移除元素，因此其他元素会受到影响，并且会像元素从网页中完全被移除一样。
让我们添加一个容器作为父元素：
<body>
<div class="container">
<div class="box-orange"></div>
<div class="box-blue"></div>
</div>
</body>.box-orange {
position: absolute;
background: orange;
width: 100px;
height: 100px;
}
现在看起来蓝色框已经消失了，但实际上并没有。蓝色盒子的行为就像橙色盒子被移除一样，所以它向上移动到橙色盒子的位置。
让我们将橙色盒子移动 5 个像素：
.box-orange {
position: absolute;
background: orange;
width: 100px;
height: 100px;
left: 5px;
top: 5px;
}
如果父元素也具有非静态位置，则绝对定位元素的坐标相对于其父元素。否则，辅助属性会相对于初始 <html> 定位元素。
.container {
position: relative;
background: lightgray;
}
.box-orange {
position: absolute;
background: orange;
width: 100px;
height: 100px;
right: 5px; // 相对于父级的最右边 5px
}
4. Fixed
类似 position: absolute，固定定位的元素也从正常的文档流中被删除。区别在于：
- 它们仅与 <html> 文档相关，与任何其他父元素无关
- 它们不受滚动的影响
.container {
position: relative;
background: lightgray;
}
.box-orange {
position: fixed;
background: orange;
width: 100px;
height: 100px;
right: 5px; // 相对于父级的最右边 5px
}在示例中，我将橙色盒子的位置更改为 fixed，这一次它是相对 <html> 右侧 5px，而不是其父元素（容器）：
正如我们所见，滚动页面不会影响固定位置的盒子，它不再相对于它的父元素（容器）定位。
5. Sticky
position: sticky 可以被看作 position: relative 和 position: fixed 的结合。
它在一个声明的点之前一直执行 position: relative，之后它将执行 position: fixed。解释 position: sticky 的最好方法是举个例子：
重要提示：Internet Explorer 和其他浏览器的早期版本不支持 position: sticky。你可以在 caniuse.com 上查看浏览器支持情况。
理解 CSS position 属性的最好方法是通过实践。继续编码，直到你更好地理解它。如果有不清楚的地方，我会在下面的评论区回答你的问题。
如果你想了解更多有关 Web 开发的信息，请随时在 YouTube 上关注我！
感谢你阅读本文！