css - 绝对位置在 flex 的子级中不起作用

Question

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

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）

谢谢 ！

标签： cssflexboxabsolute

Answer 1

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

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