Html 居中和底部对齐弹性项目

我有一个flex容器（蓝色方形），具有以下属性：

display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;

因此，它的子对象（浅蓝色方块）按照下面的方式排列。但是，我想在正常流之外添加另一个子流（绿色正方形），并将其相对于其父流进行定位。要定位它，正如您在下面看到的，我最好写一些类似

bottom:20px和
边距：自动


我试着玩弄
z-index
，但没用。我应该如何处理这个问题？我应该创建另一个父元素吗？
下面是实现此布局的五个选项：

CSS定位
具有不可见DOM元素的Flexbox
具有不可见伪元素的Flexbox
带有
flex:1的Flexbox

CSS网格布局

方法#1:CSS定位属性
将
position:relative
应用于flex容器

将
position:absolute
应用于绿色弹性项目

现在，绿色正方形完全位于flex容器中

更具体地说，绿色方框将从文档流中删除，但仍在文档的边界内

使用CSS偏移属性
顶部
，
底部
，
左侧
和
右侧
移动绿色方块


flex容器{
显示器：flex；
证明内容：中心；
对齐项目：居中；
柔性包装：nowrap；
位置：相对位置；
边框：4px纯蓝色；
高度：300px；
宽度：300px；
}
flex容器>flex项：第一个子项{
显示器：flex；
}
柔性容器>柔性项：第一个子项>柔性项{
边框：4倍纯水；
高度：50px；
宽度：50px；
利润率：0.5px；
}
flex容器>flex项：最后一个子项{
位置：绝对位置；
底部：40px；
左：50%；
变换：translateX（-50%）；/*微调水平居中*/
边框：4倍实心黄绿色；
高度：50px；
宽度：50px；
}
让容器的
位置为相对
且绿色正方形的
位置为绝对


正文{
保证金：0；
}
#容器{
显示器：flex；
证明内容：中心；
对齐项目：居中；
柔性包装：nowrap；
宽度：192px；
高度：192px；
边框：4倍纯靛蓝；
位置：相对位置；
背景：薰衣草；
}
蓝先生{
利润率：10px；
宽度：30px；
高度：30px；
外形：4倍纯色天蓝；
背景：蜜露；
}
#绿色的{
位置：绝对位置；
宽度：30px；
高度：30px；
左：0；
右：0；
保证金：自动；
底部：20px；
外形：4倍纯黄绿色；
背景：绿黄色；
}
您可以使用pseudo将前三个容器向下移动一行，然后将
边距：auto
应用于最后一个容器


div{
显示器：flex；
柔性包装：包装；
边框：#0066FD solid；；
宽度：200px；
高度：200px；
证明内容：周围的空间；
/*给我看看盒子中心*/
背景：线性渐变（顶部，rgba（0,0,0,0.2）50%，透明50%），线性渐变（左侧，rgba（0,0,0,0.2）50%，透明50%）
}
斯潘，迪夫：以前{
宽度：50px；
高度：50px；
边框：实心#01CDFF；
保证金：0自动0；
}
span:类型的最后一个，div:之前{
保证金：12px自动；
边框：实心#01FE43；
}
部门：以前{
内容：''；
宽度：100%；
边界：无；
}
跨度{
/*给我看看盒子中心*/
背景：线性梯度（45度，rgba（0,0,0,0.1）50%，透明50%），线性梯度（-45度，rgba（0,0,0,0.1）50%，透明50%）
}