将相对div1相对于绝对div2相对于绝对div3

Question

页面内容显示在绝对下拉列表上方，相对于粘性面包屑，还有更多选项。

我曾尝试过使用z-index和position，但是我发现的唯一解决方案是删除相对于内容的相对位置，这是不可行的。

如何在“ div1”上方获得“ div2”？

编辑：https://jsfiddle.net/6ncp7f1q/1/

HTML

<div class="container">
  <div class="breadcrumb">
    Home
    <div class="extra">
      <a href="#">TextText</a>
      <a href="#">TextText</a>
    </div>
  </div>
  <div class="content">
    <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
  </div>
</div>

CSS

.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;
}

Answer 1

.extra{
  z-index:1;
}

此处的示例：https://jsfiddle.net/4er5vcop/2/

Answer 2

我希望对此有所帮助

   .extra{
      z-index:1;
    }

这是结果

https://jsfiddle.net/L8mpv79a/

Answer 3

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

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

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

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

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

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

<div class="container">
  <div class="breadcrumb">
    Home
    <div class="extra">
      <a href="#">TextText</a>
      <a href="#">TextText</a>
    </div>
  </div>

  <div class="content">
    <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
  </div>
</div>