修复了固定导航栏中的元素

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-area或.bottom-area时，它们会消失到顶部。为什么我不能在导航栏上修复元素？

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-index值设置为这些类。给予更高的z-index: 100指向您希望成为最佳人选的人。 如果你能展示你的HTML，我可以更准确地为你解决它:)。