Bootstrap 3 fixed navbar and fixed content "drawer"

Question

I have created a code snippet to try and demonstrate what I am trying to achieve. (I have tried to make it as simple as possible)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Fixed Top Navbar and "drawer" content area</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
 
    <!-- Custom styles for this template -->
    <style>
  #fixed-panel-top {
   position: fixed;
   top: 0;
   right: 0;
   left: 0;
   width: 800px;
   margin-left: auto;
   margin-right: auto;
  }
  
  .custom-navbar-example {
   height: 40px;
   background-color: yellow;
   z-index: 1030;
  }
  
  .fixed-content-top {
   height: 200px;
   background-color: blue;
   z-index: 1;
  }
  
  .relative-content {
   width: 800px;
   margin-top: 300px;
   height:1000px;
   background-color: red;
   z-index: 1020;
  }
 </style>
  </head>

  <body>

    <!-- Fixed navbar -->
 <div id="fixed-panel-top">
  <!-- Navbar -->
  <div class="custom-navbar-example"></div>
 
  <!-- Top fixed content area -->
  <div class="fixed-content-top">
  </div>                         
 
 </div>

    <div class="container relative-content">
    </div> <!-- /container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  </body>
</html>

The yellow div represents a fixed top navbar, the blue div represents the fixed top content area below the navbar and the red div represents the "rest of the page content" which will be relative.

The desired effect is that as you scroll down, the red div will appear over the top of the blue div, but under the yellow div. This will give the effect of the blue div being a "drawer" of content that can be hidden by the red div. I have already tried representing this using z-index but to no avail.

Can anyone point me in the right direction or solve it?

EDIT: Clarifications

I am wanting the yellow and blue div to be both fixed. The illusion I am trying to achieve is the red div scrolls up over the blue div. If the blue div contained an image, the image would stay static while the red div scrolled up to hide it.

If you want the red div on top of the blue div why is it not inside it? — Andrew, May 18 '15 at 10:36
I didn't know it needed to be? The yellow div isn't inside the red div and it hides it just fine? I thought that was to do with the z-index of the yellow div? Sorry... not overly proficient with UI — Matt Demler, May 18 '15 at 10:46
It all depends on what you need to do with your code, but if its just a simple thing and that works for you then place the red one inside the blue — Andrew, May 18 '15 at 10:48
Do you mind posting a snippet to demonstrate what you mean? I'm not getting how having the red div inside the blue div solves the problem — Matt Demler, May 18 '15 at 11:05

score 1 · Accepted Answer · edited May 23 '17 at 12:14

Here following is the output what you want. position:relative do the trick.

#fixed-panel-top {
   position: fixed;
   top: 0;
   right: 0;
   left: 0;
   width: 800px;
   margin-left: auto;
   margin-right: auto;
  }
  
  .custom-navbar-example {
   height: 40px;
   background-color: yellow;
   z-index: 1030;
            position: relative;
  }
  
  .fixed-content-top {
   height: 200px;
   background-color: blue;
   z-index: 1;
  }
  
  .relative-content {
   width: 800px;
   margin-top: 300px;
   height:1000px;
   background-color: red;
   z-index: 10;
            position: relative;
  }

<div id="fixed-panel-top">
  <!-- Navbar -->
  <div class="custom-navbar-example"></div>
 
  <!-- Top fixed content area -->
  <div class="fixed-content-top">
  </div>                         
 
 </div>

    <div class="container relative-content">
    </div>

Check Fiddle Here.

Hope it helps.

Edit:

In chrome can't able to overrule the parent z-index. Check Reference Link

Update:

For fixed in chrome you have to make changes in HTML.

Check Updated Fiddle Here.

Hi Ketan, the red div is now passing over the yellow div. The idea is to get the red div to only pass over the blue div, but still pass under the yellow div — Matt Demler, May 18 '15 at 11:07
Ohh ok in chrome that's issue. I will check it out. in firefox it's work perfect. — ketan, May 18 '15 at 11:09
Thanks Ketan. So it looks like it is a Firefox issue that actually lets you do that. Is there another way I can construct the divs to achieve what I want? — Matt Demler, May 18 '15 at 11:26

Bootstrap 3 fixed navbar and fixed content "drawer"

1 Answers1