Неподвижные элементы фиксированной навигационной панели

Question

Я пытаюсь сделать Navbar, который имеет фиксированное положение и имеет элементы внутри него, которые также фиксированные:

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

.content-area { 
overflow: scroll; 
} 

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

У меня есть две области, должны быть зафиксированы в верхней и нижней частях, а область содержимого в середине, которая переполняется, прокручивается под нижней областью. Когда я добавляю position: fixed; в .top-область или область .bottom, они исчезают на вершине. Почему я не могу зафиксировать элемент на панели навигации?

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, я мог бы исправить его более точно для вас :).