Html 将圆直接定位在对象后面

如何获得我创建的7个项目后面的圆形箭头。类似于这张图片中显示的内容：出于某种原因，我无法让它工作。有人知道如何做到这一点吗？任何有帮助的，干杯

.container.row{text align:center；position:relative；}
.中心{
显示：内联块；
背景色：#1f497d；
宽度：100px；
高度：50px；
边框宽度：3倍；
边框样式：实心；
边框颜色：#ededed；
边界半径：7px；
盒影：0px 1px 5px#8888888；
}
.左{
显示：内联块；
背景色：#1f497d；
宽度：100px；
高度：50px；
边框宽度：3倍；
边框样式：实心；
边框颜色：#ededed；
边界半径：7px；
盒影：0px 1px 5px#8888888；
}
.对{
显示：内联块；
背景色：#1f497d；
宽度：100px；
高度：50px；
边框宽度：3倍；
边框样式：实心；
边框颜色：#ededed；
边界半径：7px；
盒影：0px 1px 5px#8888888；
左边距：-35px；
}
.圆圈{
显示：内联块；
背景色：#006850；
宽度：85px；
高度：85px；
边框宽度：3倍；
边框样式：实心；
边框颜色：#fefefe；
边界半径：50%；
盒影：0px 1px 5px#8888888；
边缘底部：-15px；
}
.无形的{
可见性：隐藏；
显示：内联块；
背景色：#1f497d；
宽度：130px；
高度：65px；
边框宽度：3倍；
边框样式：实心；
边框颜色：#D6；
边界半径：7px；
盒影：0px 1px 5px#8888888；
}
.阿罗{
颜色：#d0d3d8；
宽度：200px；
高度：200px；
边界：17px固体；
边界半径：50%；
位置：相对位置；
}
.阿罗：以前{
内容：“；
显示：块；
宽度：30px；
高度：50px；
背景：#fff；
位置：绝对位置；
底部：0；
排名：0；
右：-22px；
保证金：自动；
}
.阿罗：之后{
内容：“；
宽度：0；
身高：0；
左边框：20px实心透明；
右边框：20px实心透明；
边框顶部：20px实心#d0d3d8；
位置：绝对位置；
底部：106px；
右：-25px；
}

---

您需要提供

.container

此CSS样式：

.container {
  margin-top: -17px;
  height: 313px;
  width: 371px;
  display: flex;
  align-items: center;
}

用id为

stuff

的另一个div将

.container

中的所有内容包围起来，但

箭头除外

为
.stuff
提供以下样式：

.stuff {
  position: absolute;
  top: 0;
}

将以下CSS行添加到
.arrow

  margin: 0 auto;

将
.arrow
div移到
.stuff
div之前

这应该行得通

以下是我得到的结果：


.container{
身高：313px；
宽度：371px；
显示器：flex；
对齐项目：居中；
利润上限：-17px；
}
.集装箱{
文本对齐：居中；
位置：相对位置；
}
.中心{
显示：内联块；
背景色：#1f497d；
宽度：100px；
高度：50px；
边框宽度：3倍；
边框样式：实心；
边框颜色：#ededed；
边界半径：7px；
盒影：0px 1px 5px#8888888；
}
.左{
显示：内联块；
背景色：#1f497d；
宽度：100px；
高度：50px；
边框宽度：3倍；
边框样式：实心；
边框颜色：#ededed；
边界半径：7px；
盒影：0px 1px 5px#8888888；
}
.对{
显示：内联块；
背景色：#1f497d；
宽度：100px；
高度：50px；
边框宽度：3倍；
边框样式：实心；
边框颜色：#ededed；
边界半径：7px；
盒影：0px 1px 5px#8888888；
左边距：-35px；
}
.圆圈{
显示：内联块；
背景色：#006850；
宽度：85px；
高度：85px；
边框宽度：3倍；
边框样式：实心；
边框颜色：#fefefe；
边界半径：50%；
盒影：0px 1px 5px#8888888；
边缘底部：-15px；
}
.无形的{
可见性：隐藏；
显示：内联块；
背景色：#1f497d；
宽度：130px；
高度：65px；
边框宽度：3倍；
边框样式：实心；
边框颜色：#D6；
边界半径：7px；
盒影：0px 1px 5px#8888888；
}
.阿罗{
颜色：#d0d3d8；
宽度：200px；
高度：200px；
边界：17px固体；
边界半径：50%；
位置：相对位置；
保证金：0自动；
}
.阿罗：以前{
内容：“；
显示：块；
宽度：30px；
高度：50px；
背景：#fff；
位置：绝对位置；
底部：0；
排名：0；
右：-22px；
保证金：自动；
}
.阿罗：之后{
内容：“；
宽度：0；
身高：0；
左边框：20px实心透明；
右边框：20px实心透明；
边框顶部：20px实心#d0d3d8；
位置：绝对位置；
底部：106px；
右：-25px；
}
.东西{
位置：绝对位置；
排名：0；
}
若要执行所需操作，必须绝对定位箭头，并使用z-index使其位于容器上方和行下方。
以下是更新的代码段：


.container{
位置：相对位置；
}
.集装箱{
文本对齐：居中；
位置：相对位置；
}
.行{z-索引：2；}
.中心{
显示：内联块；
背景色：#1f497d；
宽度：100px；
高度：50px；
边框宽度：3倍；
边框样式：实心；
边框颜色：#ededed；
边界半径：7px；
盒影：0px 1px 5px#8888888；
}
.左{
显示：内联块；
背景色：#1f497d；
宽度：100px；
高度：50px；
边框宽度：3倍；
边框样式：实心；
边框颜色：#ededed；
边界半径：7px；
盒影：0px 1px 5px#8888888；
}
.对{
显示：内联块；
背景色：#1f497d；
宽度：100px；
高度：50px；
边框宽度：3倍；
边框样式：实心；
边框颜色：#ededed；
边界半径：7px；
盒影：0px 1px 5px#8888888；
左边距：-35px；
}
.圆圈{
显示：内联块；
背景色：#006850；
宽度：85px；
高度：85px；
边框宽度：3倍；
边框样式：实心；
边框颜色：#fefefe；
边界半径：50%；
盒影：0px 1px 5px#8888888；
边缘底部：-15px；
}
.无形的{
可见性：隐藏；
显示：内联块；
背景色：#1f497d；
宽度：130px；
嗨