原文: How to use the position property in CSS to align elements,作者:Cem Eygi

译者: Miya Liu

在 Web 开发中使用 CSS 定位元素并不像看起来那么容易。随着你的项目变得越来越大,事情会很快变得复杂,并且如果没有很好地理解 CSS 如何处理对齐 HTML 元素,你将无法解决对齐问题。

使用纯 CSS 定位元素有不同的方式/方法。使用 CSS floatdisplayposition 属性是最常用的方法。

在本文中,我将解释使用纯 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 的情况。
1660290826908
元素随着它们的 z-index 值增加从后往前排序

你可以在我的频道上观看视频,以了解如何更详细地使用 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
}
1660291689746
有和没有 postion: 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
}
1660292070438
橙色盒子相对于它的正常位置被移动了 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;
}
1_C15mDxOdtFLkXLcFaVRYBQ
position: absolute 将元素放到它的父元素的开头

现在看起来蓝色框已经消失了,但实际上并没有。蓝色盒子的行为就像橙色盒子被移除一样,所以它向上移动到橙色盒子的位置。

让我们将橙色盒子移动 5 个像素:

.box-orange {
  position: absolute;
  background: orange;
  width: 100px;
  height: 100px;
  left: 5px;
  top: 5px;
}
image
现在我们可以看到蓝色盒子

如果父元素也具有非静态位置,则绝对定位元素的坐标相对于其父元素。否则,辅助属性会相对于初始 <html> 定位元素。

.container {
  position: relative;
  background: lightgray;
}

.box-orange {
  position: absolute;
  background: orange;
  width: 100px;
  height: 100px;
  right: 5px;    // 相对于父级的最右边 5px 
}
1*AEX5fn8t0MJZCo4Lx52Uaw

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: relativeposition: fixed 的结合。

它在一个声明的点之前一直执行 position: relative,之后它将执行 position: fixed。解释 position: sticky 的最好方法是举个例子:

重要提示:Internet Explorer 和其他浏览器的早期版本不支持 position: sticky。你可以在 caniuse.com 上查看浏览器支持情况。

Ekran-Resmi-2019-10-04-23.09.24
对于 position: sticky 的浏览器支持

理解 CSS position 属性的最好方法是通过实践。继续编码,直到你更好地理解它。如果有不清楚的地方,我会在下面的评论区回答你的问题。

如果你想了解更多有关 Web 开发的信息,请随时在 YouTube 上关注我

感谢你阅读本文!