绝对位置在 flex 的子项中不起作用 [重复]答案

【问题标题】：Absolute position doesn't work inside children of flex [duplicate]绝对位置在 flex 的子项中不起作用 [重复]
【发布时间】：2021-05-17 01:37:36
【问题描述】：

我不知道怎么了。以下是意外行为的简短演示：

https://jsfiddle.net/JackIsJack/wfadbu67/16/

#parent {
  display: flex;
  flex-direction: row;
}

.child {
  background-color:red;
  width: 50px;
  height: 50px;
  margin: 5px 5px 5px 5px;
}

.menu {
  position: absolute;
  bottom: 0;
  width: 10px;
  height: 10px;
  background-color: blue;
}

<div id="parent">
  <div class="child">1</div>
  <div class="child">2<div class="menu"></div></div>
  <div class="child">3</div>
</div>

谁能给我一个线索？

预期行为：https://i.stack.imgur.com/TOMfm.png

Chrome 88.0.4324（我只用 chrome）

谢谢！

【问题讨论】：

您需要在父级中添加 position: relative; 然后 position: absolute; 将对子级起作用。

标签： css flexbox absolute

【解决方案1】：

您需要将position:relative 添加到具有child 类的menu 的父元素：

.child {
  display: flex;
  flex-direction: row;
  position: relative
}

【讨论】：

【解决方案2】：

给父母一个相对定位，让它成为绝对孩子的参考。

#parent {
  display: flex;
  flex-direction: row;
}

.child {
  background-color:red;
  width: 50px;
  height: 50px;
  margin: 5px 5px 5px 5px;
  position:relative;
}

.menu {
  position: absolute;
  bottom: 0;
  width: 10px;
  height: 10px;
  background-color: blue;
}

<div id="parent">
  <div class="child">1</div>
  <div class="child">2<div class="menu"></div></div>
  <div class="child">3</div>
</div>

【讨论】：

【解决方案3】：

您的父元素，即类 child 的元素应该是类 menu 的元素的定位元素。

如果您从MDN 看到，对于绝对定位元素的定义如下：-

如果有的话，它是相对于它最近的祖先定位的；否则，它相对于初始包含块放置。它的最终位置由 top、right、bottom 和离开了。

在您的情况下，要使child 成为定位元素，请给它一个position:relative，以便menu 现在可以相对于它绝对定位（最近定位的祖先）

定位元素也是所有没有默认position:static值的元素。

#parent {
  display: flex;
  flex-direction: row;
}

.child {
  position:relative;
  background-color:red;
  width: 50px;
  height: 50px;
  margin: 5px 5px 5px 5px;
}

.menu {
  position: absolute;
  bottom: 0;
  width: 10px;
  height: 10px;
  background-color: blue;
}

<div id="parent">
  <div class="child">1</div>
  <div class="child">2<div class="menu"></div></div>
  <div class="child">3</div>
</div>

【讨论】：