绝对位置在 flex 的孩子中不起作用

问题描述

我不知道怎么了。 这是一个意外行为的简短演示：

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

#parent {
  @R_404_6422@play: 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）

谢谢！

解决方法

您需要将 pattern = "\b(?![bB])[a-zA-Z]+[bB][a-zA-Z]+(?<![bB])\b" 添加到具有 position:relative 类的 menu 的父元素：

child

,

给父对象一个相对定位，使其成为绝对子对象的引用。

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

,

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

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

它相对于其最近定位的祖先定位，如果有的话； 否则，它相对于初始包含块放置。它的 最终位置由顶部、右侧、底部和 离开了。

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

还有定位元素是所有没有默认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>