Html 位置相对div1高于位置绝对div2相对于div3

页面内容显示在绝对下拉列表上方，与粘性面包屑相关的选项更多

我尝试过使用z-index和positions，但我找到的唯一解决方案是删除内容上的相对位置，这不是一个选项

如何将'div2'置于'div1'之上

编辑：

HTML

---

这里的例子：

我希望能对此有所帮助

   .extra{
      z-index:1;
    }

结果如下

---

只需将z-index设置为面包屑

.container{
显示器：flex；
弯曲方向：立柱；
}
.面包屑{
位置：相对位置；
高度：40px；
宽度：100%；
背景颜色：粉红色；
z指数：99；
}
.额外的{
位置：绝对位置；
背景色：红色；
右：0；
顶部：20px；
}
.额外的{
显示：块；
宽度：100%；
}
.内容{
位置：相对位置；
宽度：100%；
颜色：绿色；
}

家
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本

一些代码或提琴在这里会很有帮助。提供了一个jfiddle@rmndidn你不试试这个吗。额外的{z-index:1；}如果你读了我提到的第二段，我读了，但没有读work@Wanjia您希望红色链接显示在内容上方吗？

.container{
  display: flex;
  flex-direction: column;
}

.breadcrumb{
  position: relative;
  height: 40px;
  width: 100%;
  background-color: pink;
}

.extra{
  position: absolute;
  background-color: red;
  right: 0;
  top: 40px;
}

.extra a {
  display: block;
  width: 100%;
}

.content{
  position: relative;
  width: 100%;
  color: green;
}

.extra{
  z-index:1;
}

   .extra{
      z-index:1;
    }