详解flex布局与position:absolute/fixed的冲突问题

一、什么是flex布局？

一、什么是flex布局？

flex布局是一种用来对齐和分配空间的CSS3布局模式。在flex布局中，元素会被分配到一个flex容器（flex container）内，并沿着主轴（main axis）或交叉轴（cross axis）进行布局。

主轴是flex容器中的主要方向，它定义了元素之间的水平间距。默认情况下，主轴是水平的。与主轴垂直的是交叉轴，它定义了元素之间的垂直间距。

使用flex布局时，可以为容器指定一些属性，如flex-direction、justify-content、align-items等，来控制布局方式，从而打造出各种各样的页面布局。

二、为什么flex布局会与position:absolute/fixed发生冲突？

当我们在使用flex布局时，经常会因为子元素使用了position:absolute或position:fixed而发生冲突，使得元素无法正确地显示或布局出现异常。

这是因为，flex布局是一种基于容器的布局方式，它会对容器内所有元素进行定位和排版，而position:absolute/fixed会将元素从文档流中脱离出来，导致无法获得正确的位置信息，从而产生问题。

三、如何避免flex布局与position:absolute/fixed的冲突？

1、设置子元素的位置属性为relative

在使用flex布局时，如果子元素要使用position:absolute或position:fixed，可以将其位置属性设置为relative，从而将定位基准点设置为容器元素，并根据容器元素进行定位。

代码示例：

<div class="container">
  <div class="box">
    <p>我是一个绝对定位的元素</p>
  </div>
</div>

.container {
  display: flex;
  flex-direction: column;
  height: 300px;
  justify-content: center;
  align-items: center;
  background-color: #F5F5F5;
}

.box {
  position: relative;
  background-color: #87CEFA;
  width: 200px;
  height: 100px;
}

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

在这个例子中，我们把子元素的容器使用flex布局，并把子元素的位置属性设置为relative。同时，我们在p标签中使用了position:absolute属性，通过设置top、left和transform来让其定位在了父元素的中央。

2、将absolute/fixed元素的父元素设置为flex容器

如果父元素本身也是一个flex容器，可以通过将其position属性设置为relative或absolute/fixed，来将整个容器设置为flex布局，并实现对子元素的正确排版和定位。

代码示例：

<div class="container">
  <div class="box">
    <p>我是一个绝对定位的元素</p>
  </div>
</div>

.container {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 300px;
  justify-content: center;
  align-items: center;
  background-color: #F5F5F5;
}

.box {
  position: absolute;
  background-color: #87CEFA;
  width: 200px;
  height: 100px;
}

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

在这个例子中，我们把父元素的容器使用了flex布局，并将其position属性设置为relative，这样子元素的定位基准点就在了整个父元素内。同时，我们在子元素中使用了position:absolute属性，通过设置top、left和transform来让其定位在了父元素的中央。

总之，在使用flex布局时，我们应该尽可能避免使用position:absolute/fixed来定位元素。如果必须使用这些属性，我们需要通过设置子元素的位置属性为relative或将父元素设置为flex容器来避免冲突问题。