如何在 flex 容器内绝对定位一个 div，而不影响其兄弟元素的位置？

Question

如何在 flex 容器内绝对定位一个 div，而不影响其兄弟元素的位置？

19

我在一个弹性布局的#container里面有一个#text，并且想要在它下面绝对定位一个东西：

如何让它不参与计算它兄弟元素的弹性布局位置？

#container{
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  position: relative;
  width: 95vw;
  height: 95vh;
  border: 1px solid black
}
#text{
  font-size: 13px;
  width: 50vw;
  text-align: justify;
}
#absolute{
  position: absolute;
  bottom: 5px;
  left: calc(47.5vw - 25px);
  width: 50px;
  text-align: center;
  color: red;
}

<div id="container">
  <div id="text">
    "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga."
  </div>
  <div id="absolute">
    Absolutly
  </div>
</div>

注意到 #text 在其父级中略微偏上，如果可能的话，我希望它能够完美地垂直居中，而不修改:

节点树
已编写的 flex 属性（如多个 .text 元素的 justify-content）

编辑：

我发现了另一个与此问题相关的问题，尝试了解决方案，但没有结果：绝对定位的元素在 Flex 容器中仍被视为 IE 和 Firefox 的项

这似乎是 Firefox 和 IE 的 bug（我目前正在运行 Firefox 47，在 Chromium 上运行正常。）

最终编辑：

我对此进行了深入研究，并发现了许多相关的问题（重复）：

以及到 Bugzilla 的直接链接。

- PaulCo

重复问题的解决方案，并不适用于所有情况。如果您添加一个 div，它将无法解决问题。 - carkod

2个回答

4

#container{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  width: 95vw;
  height: 95vh;
  border: 1px solid black
}
#text{
  font-size: 13px;
  width: 50vw;
  text-align: justify;
}
#absolute{
  position: absolute;
  bottom: 5px;
  left: calc(47.5vw - 25px);
  width: 50px;
  text-align: center;
  color: red;
}

<div id="container">
  <div id="text">
    "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga."
  </div>
  <div id="absolute">
    Absolutly
  </div>
</div>

将 justify-content 的值更改为 center。希望现在可以正常工作。

- hdotluna

非常感谢，当我只有一个文本元素时，我使用了这个解决方案。如果你有另一个元素，它们不会像预期的那样被处理为“space-around”。这就是为什么我写下了：如果可能的话，不要修改：

节点树

已经编写的 flex 属性

请不要再让我大喊大叫了。 - PaulCo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Benjamin · Accepted Answer

正如您所发现的那样，在某些浏览器中，绝对定位的 flex 项目在计算 justify-content 时会被考虑进去，尽管它应该从正常流中移除。

根据规范的定义：

4.1. 绝对定位的 Flex 子元素

由于它是脱离标准流的，flex 容器中的绝对定位子元素不参与 flex 布局。

然而，在 Firefox 和 IE11 中，绝对定位的 flex 项目会像普通兄弟元素一样参与与 justify-content 的对齐方式。

下面是一个示例。它在当前版本的 Chrome、Safari 和 Edge 中可以正常工作，但在 Firefox 和 IE11 中无法正常工作。

flex-container {
  display: flex;
  justify-content: space-between;
  position: relative;
  background-color: skyblue;
  height: 100px;
}
flex-item {
  background: lightgreen;
  width: 100px;
}
[abspos] {
  position: absolute;
  z-index: -1;
}

<flex-container>
  <flex-item>item 1</flex-item>
  <flex-item>item 2</flex-item>
  <flex-item abspos>item 3</flex-item>
</flex-container>

jsFiddle版本

尽管你已经了解了其他答案中发布的解决方法，但我会提供一种替代方法，以防你陷入一个XY问题。

我的理解是，你想要把一个flex项目底部对齐，另一个项目在容器中垂直居中。好吧，你不一定需要使用绝对定位来实现这个目标。

您可以使用一个看不见的伪元素作为第三个flex项目。此项将作为与底部对齐的DOM元素的平衡和保持中间项居中。

以下是详细信息：

Flex项目的居中和底部对齐
对齐Flex项目的方法（参见框62和66）