Html 如何在不影响其兄弟姐妹的位置的情况下绝对地在弹性框中定位一个 div？

How to position absolutely a div within a flex box without influencing the position of its siblings?

提问by PaulCo

I've got a #textinside a flex #containerand want to absolutely position something underneath it :

我有一个#text内部的 flex#container并且想要在它下面绝对放置一些东西：

How could it not be taken in the calculation for the flex positioning of is siblings ?

怎么能不计算 issiblings 的 flex 定位呢？

#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>

As you'll notice the #textis slightly upside the center of is parent and I would like it perfectly vertically centeredif possible without modifying :

正如您会注意到的#text，是父级的中心略微向上，如果可能，我希望它完全垂直居中而无需修改：

• The node tree

• The already written flex properties(as justify-contentin case of multiples .textelements)

• 节点树

• 已经写好的 flex 属性（如justify-content在多个.text元素的情况下）

Edit :

编辑 ：

I've found another question on this matter, tried the solution without results : Absolute positioned item in a flex container still gets considered as item in IE & Firefox

我发现了关于这个问题的另一个问题，尝试了没有结果的解决方案：flex 容器中的绝对定位项目仍然被视为 IE 和 Firefox 中的项目

It seems to be relative a Firefox and IE bug(I'm currently running Firefox 47, it works on Chromium.)

它似乎与 Firefox 和 IE 错误有关（我目前运行的是 Firefox 47，它适用于 Chromium。）

Final Edit :

最终编辑：

I pushed my research on the subject and found many questions related(duplicate) :

我推动了对该主题的研究，发现了许多相关问题（重复）：

• Absolute positioning interfering with flexbox positioning in Firefox

• Absolutely positioned flex item not being removed from normal flow in Firefox

• Flexbox in Firefox: Items are not lined up properly

• Answerby @Oriol Exclude element with fixed positioning from justify-content in flex layout

• 绝对定位干扰 Firefox 中的 flexbox 定位

• 绝对定位的弹性项目不会从 Firefox 的正常流程中删除

• Firefox 中的 Flexbox：项目未正确排列

• @Oriol 的回答从 flex 布局中的 justify-content 排除具有固定定位的元素

And a direct link to Bugzilla.

和Bugzilla的直接链接。

采纳答案by Michael Benjamin

As you've discovered, an absolutely-positioned flex item factors into justify-contentcalculations in some browsers despite the fact it should be removed from the normal flow.

正如您所发现的，绝对定位的弹性项目会影响justify-content某些浏览器的计算，尽管它应该从正常流程中删除。

As defined in the spec:

如规范中所定义：

4.1. Absolutely-Positioned Flex Children

As it is out-of-flow, an absolutely-positioned child of a flex container does not participate in flex layout.

4.1. 绝对定位的 Flex 儿童

由于它是流出的，一个绝对定位的 flex 容器的孩子不参与 flex 布局。

In Firefox and IE11, however, absolutely-positioned flex items act like normal siblings in terms of alignment with justify-content.

然而，在 Firefox 和 IE11 中，绝对定位的 flex 项目在与justify-content.

Here's an example. It works in current Chrome, Safari and Edge, but fails in Firefox and IE11.

这是一个例子。它适用于当前的 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 version

jsFiddle 版本

---

---

Although you're aware of the workarounds posted in other answers, I'll suggest an alternative approach in case you're caught in an XY problem.

尽管您知道其他答案中发布的变通方法，但我会建议您采用另一种方法，以防您遇到XY 问题。

My understanding is that you want to bottom-align one flex item, but have another item vertically centered in the container. Well, you don't necessarily need absolute positioning for this.

我的理解是你想要底部对齐一个 flex 项目，但有另一个项目在容器中垂直居中。好吧，您不一定需要为此进行绝对定位。

You can use an invisible pseudo-element that acts as a third flex item. This item will serve as a counterbalance to the bottom-aligned DOM element and keep the middle item centered.

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

Here are the details:

以下是详细信息：

• Center and bottom-align flex items
• Methods for Aligning Flex Items(see boxes 62 & 66)

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

回答by devhermluna

#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>

Change the value of justify-content to center. Hope it works now.

将 justify-content 的值更改为 center。希望它现在有效。