CODEWITHSUNDEEP
css
user2736480
user2736480

Reputation: 75

Fixed elements in a fixed navbar

I'm trying to make a navbar that has a fixed position and has elements inside of it that are also 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 two areas that should be fixed to the top and the bottom and a content area in the middle that's overflow scrolls under the bottom area. When I add position: fixed; to .top-area or .bottom-area they disappear to the top. Why can't I fix an element onto the navbar?

The html looks like this:

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

Upvotes: 0

Views: 135

Answers (1)

rashidkhan
rashidkhan

Reputation: 472

Fixed Elements are taken out of the normal flow of html page. Try to set the z-index value to these classes. Give higher e.g. z-index: 100 to those which you want to be on the top. If you could show your html, I could fix it more precisely for you :).

Upvotes: 1

Related Questions