css - Fixed elements in a fixed navbar -


i'm trying make navbar has fixed position , has elements inside of fixed:

enter image description here

.navbar {   position: fixed;  top: 0;  bottom: 0;  right: 0; }  .content-area {  overflow: scroll; }  .top-area {   height: 100px;   position: fixed;   top: 0; } 

i have 2 areas should fixed top , bottom , content area in middle that's overflow scrolls under bottom area. when add position: fixed; .top-area or .bottom-area disappear top. why can't fix element onto navbar?

the html looks this:

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

fixed elements taken out of normal flow of html page. try set z-index value these classes. give higher e.g. z-index: 100 want on top. if show html, fix more precisely :).


Comments

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -