Div 下拉菜单

Question

Well, this is actually a complicated problem, the default behavior of a header is simple, it gets in front of everything, however I want to put a div that will overlap it, putting a blur on the page, my goal is for the header to be behind of this div.

 .body{ min-height: 2000px; } .overlay{ background-color: rgba(126, 246, 53, 0.50); z-index: 1050; position: absolute; height: 100%; width: 100%; top: 0; } .overlayDiv{ background: white; z-index: 1051; margin-top: 100px; position: relative; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <nav class="navbar fixed-top navbar-light bg-light"> <a class="navbar-brand" href="#">Header</a> </nav> <div class="body"> <div class="overlayDiv col-8 offset-2"> <h1>That's divs on top of the page</h1> </div> <div class="overlay"></div> </div>

As you can see in the example, overlayDiv is above the overlay , which is what I want, but it goes over the menu, what I want is for the menu to be over it even being opaque, would that be possible?

Edit:

I would like to do something rather complicated, I will explain otherwise to try to clarify.

The top div has to go under the header when it gets there, and fade in behind it partially.

so it looks like it's entering the page just below the header, I thought of going to cut the height of her, but the content is not getting the way desired, example: cutting the text

Edit 2.0:

The div of the text displayed in the example really has to be above the mask, and the menu below the mask.

The idea is that as div reaches the height of the menu it slowly moves past it, as if sliding down the menu

would look something like this

Answer 1

If I understand you correctly, you want the navbar between overlayDiv and overlay ? You can do this by adjusting the z-index es. navbar gets a default z-index of 1030 , so set overlayDiv 's z-index to something higher, and overlay 's to something lower:

 .body{ min-height: 2000px; z-index: 99; } .overlay{ background-color: rgba(126, 246, 53, 0.50); position: absolute; height: 100%; width: 100%; top: 0; z-index: 97; } .overlayDiv{ background: white; z-index: 5000; margin-top: 100px; position: relative; z-index: 98; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <nav class="navbar fixed-top navbar-light bg-light"> <a class="navbar-brand" href="#">Header</a> </nav> <div class="body"> <div class="overlayDiv col-8 offset-2"> <h1>That's divs on top of the page</h1> </div> <div class="overlay"></div> </div>

Edit: z-index is the right way of usage in this particular case.

Answer 2

Please check is it something you want i guess.

 .body{ min-height: 2000px; } nav.fixed-top{ z-index: 1050; background: #fff; box-shadow: 0 0 8px rgba(0,0,0,0.3); } .overlay{ background-color: rgba(126, 246, 53, 0.50); z-index: 1060; position: absolute; height: 100%; width: 100%; top: 0; } .overlayDiv{ background: white; z-index:1040; margin-top: 100px; position: relative; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <nav class="navbar fixed-top navbar-light"> <a class="navbar-brand" href="#">Header</a> </nav> <div class="body"> <div class="overlayDiv col-8 offset-2"> <h1>That's divs on top of the page</h1> </div> <div class="overlay"></div> </div>

Answer 3

Simply add <div class="BlurDiv"> </div>

Place the div around the entire html, so whatever your top container div is for example if it was <div class="main-container"></div>

Make it like this:

<div class="BlurDiv">
  <div class="main-container">
  </div>
</div>

then create your blur CSS and assign it to div id BlurDiv.

Answer 4

There is one other solution i found bit tricky but meet requirement, i am adding a same background to nav as overlay . Now it will show white background on text as well as getting under 'nav'. This will also allow you to click on nav elements.

 .body { min-height: 2000px; } nav.fixed-top { z-index: 1080; background: #befa99; box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); } .overlay { background-color: rgba(126, 246, 53, 0.50); z-index: 1030; position: absolute; height: 100%; width: 100%; top: 0; } .overlayDiv { background: white; z-index: 1040; margin-top: 100px; position: relative; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <nav class="navbar fixed-top navbar-light"> <a class="navbar-brand" href="#">Header</a> </nav> <div class="body"> <div class="overlayDiv col-8 offset-2"> <h1>That's divs on top of the page</h1> </div> <div class="overlay"></div> </div>

Answer 5

Based on your answers I was able to think of a solution that was plausible to solve the problem, thank you for your commitment, what I needed is below

 .body{ min-height: 2000px; } .overlay{ background-color: rgba(126, 246, 53, 0.50); z-index: 1028; position: absolute; height: 2000px; width: 100%; top: 0; } .overlayDiv{ background: white; z-index: 1029; margin-top: 100px; position: relative; } .navOverlayDiv{ background-color: rgba(126, 246, 53, 0.50); z-index: 1053; position: absolute; height: 100%; width: 100%; top: 0; left: 0; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <nav class="navbar fixed-top navbar-light bg-light"> <a class="navbar-brand" href="#">Header</a> <div class="navOverlayDiv"> </div> </nav> <div class="body"> <div class="overlayDiv col-8 offset-2"> <h1>That's divs on top of the page</h1> </div> <div class="overlay"></div> </div>