Css 绝对位置不'；不要在flex的子系统中工作

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

#父级{
显示器：flex；
弯曲方向：行；
}
.孩子{
背景色：红色；
宽度：50px；
高度：50px；
保证金：5px 5px 5px 5px；
}
.菜单{
位置：绝对位置；
底部：0；
宽度：10px；
高度：10px；
背景颜色：蓝色；
}

1.
2.
3.

您需要将

位置：相对

添加到

菜单

的父元素，该菜单有一个子类：

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

---

给父对象一个相对位置，使其成为绝对子对象的参考

#父级{
显示器：flex；
弯曲方向：行；
}
.孩子{
背景色：红色；
宽度：50px；
高度：50px；
保证金：5px 5px 5px 5px；
位置：相对位置；
}
.菜单{
位置：绝对位置；
底部：0；
宽度：10px；
高度：10px；
背景颜色：蓝色；
}

1.
2.
3.

对于具有类

菜单的元素，您的父元素，即具有类
子元素的元素应为定位元素

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

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

在您的情况下，对于要定位元素的
子元素
，给它一个
位置：相对
，以便
菜单
现在可以相对于它（最近的定位祖先）绝对定位

另外，定位元素是没有默认
位置：静态
值的所有元素


#父级{
显示器：flex；
弯曲方向：行；
}
.孩子{
位置：相对位置；
背景色：红色；
宽度：50px；
高度：50px；
保证金：5px 5px 5px 5px；
}
.菜单{
位置：绝对位置；
底部：0；
宽度：10px；
高度：10px；
背景颜色：蓝色；
}

1.
2.
3.
您需要添加位置：相对；在父然后位置：绝对；将在儿童身上工作。