固定肚脐中的固定元素

Question

我正在尝试做一个导航条，它有固定的位置，并且里面的元素也是固定的：

​

​

.navbar { 
 position: fixed;
 top: 0;
 bottom: 0;
 right: 0;
}

.content-area {
 overflow: scroll;
}

.top-area {
  height: 100px;
  position: fixed;
  top: 0;
}

我有两个应该固定在顶部和底部的区域和中间的一个内容区域，即底部区域下面的溢出卷轴。当我将position: fixed;添加到. top区域或.底部区域时，它们会消失在顶部。为什么我不能在肚脐上固定一个元素呢？

html如下所示：

<div class="navbar">
  <div class="top-area">
  </div>
  <div class="content-area">
  <p> Content here </p>
  </div>
  <div class="bottom-area">
  </div>
</div>

Answer 1

固定元素被从html页面的正常流中删除。尝试将z-索引值设置为这些类。给那些你想在上面的人更高的z-index: 100。如果您能够显示您的html，我可以为您更精确地修复它:)。