Flex 布局下的绝对定位问题及解决方案

随着 Web 应用的发展，前端开发中使用 Flex 布局的情况越来越多。Flex 布局可以快速实现各种页面布局，但是在使用 Flex 布局时，经常会遇到绝对定位的问题。本文将介绍在 Flex 布局下绝对定位的问题及解决方案。

问题描述

在使用 Flex 布局时，我们经常会使用 position: absolute 进行绝对定位。但是在 Flex 布局下，使用 position: absolute 会遇到一些问题。下面是一个例子：

<div class="container">
  <div class="item item1"></div>
  <div class="item item2"></div>
</div>

// javascriptcn.com 代码示例
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  background-color: #eee;
}

.item {
  width: 50px;
  height: 50px;
  background-color: #f00;
}

.item1 {
  position: absolute;
  top: 0;
  left: 0;
}

.item2 {
  position: absolute;
  bottom: 0;
  right: 0;
}

在上面的例子中，我们使用 Flex 布局将容器垂直和水平居中，然后使用 position: absolute 对两个子元素进行绝对定位。但是，这时候我们会发现，两个子元素并没有按照我们的预期进行定位，而是重叠在了一起。

问题分析

在 Flex 布局下，使用 position: absolute 进行绝对定位时，元素的定位是相对于最近的定位父元素进行的。而在 Flex 布局中，容器元素是一个弹性盒子，其默认的定位方式是 position: static，即没有定位。因此，在上面的例子中，两个子元素的定位是相对于容器元素的左上角进行的，而不是相对于容器元素的中心进行的。

解决方案

要解决上述问题，我们需要让容器元素成为一个定位元素。在 Flex 布局中，可以使用 position: relative 将容器元素变成一个定位元素。修改上面的例子，代码如下：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  background-color: #eee;
  position: relative; /* 新增 */
}

这时候，两个子元素就可以按照我们的预期进行定位了。

总结

在使用 Flex 布局时，使用 position: absolute 进行绝对定位时，需要注意定位元素的定位方式。如果定位元素是容器元素，则需要将其变成一个定位元素（即使用 position: relative）。

本文介绍了在 Flex 布局下绝对定位的问题及解决方案，希望对大家有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6509a62695b1f8cacd44dbaa