如何在不影响其兄弟位置的情况下将 div 绝对定位在弹性框中？ [复制]

Posted 2023-03-05

【中文标题】如何在不影响其兄弟位置的情况下将 div 绝对定位在弹性框中？ [复制]

【英文标题】：How to position absolutely a div within a flex box without influencing the position of its siblings? [duplicate]

【发布时间】：2017-02-02 02:01:40

【问题描述】：

我在 flex #container 中有一个 #text，并且想在它下面放置一些东西：

is兄弟的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>

您会注意到 #text 稍微在父级的中心上方，如果可能的话，我希望它完全垂直居中而不需要修改：

节点树

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

编辑：

我发现了关于这个问题的另一个问题，尝试了没有结果的解决方案：Absolute positioned item in a flex container still gets considered as item in IE & Firefox

这似乎是一个 Firefox 和 IE 的相对错误 （我目前正在运行 Firefox 47，它适用于 Chromium。）

最终编辑：

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

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

回答@Oriol Exclude element with fixed positioning from justify-content in flex layout

还有指向Bugzilla的直接链接。

【问题讨论】：

重复问题解决方案，不适用于所有情况。多加一个div就解决不了了。

【参考方案1】：

#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。希望它现在可以工作。

【讨论】：

非常感谢，当我只有一个文本元素时，我使用了这个解决方案。如果您有另一个，它们将不会像预期的那样被“环绕”处理。这就是我写的原因：如果可能不修改：节点树已经写好的弹性属性请不要再让我大喊大叫了。

【参考方案2】：

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

按照规范中的定义：

4.1. Absolutely-Positioned Flex Children

由于它是外流的，因此是 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 version

---

虽然您知道其他答案中发布的解决方法，但我会建议一种替代方法，以防您被XY problem 抓住。

我的理解是，您希望一个 flex 项目底部对齐，但另一个项目在容器中垂直居中。好吧，您不一定需要绝对定位。

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

详情如下：

Center and bottom-align flex items Methods for Aligning Flex Items（见方框 62 和 66）

【讨论】：

截至 12 月的 flex 容器内的绝对定位。 2019：codepen.io/ekadagami/pen/mdyPybq