Div 下拉菜單

Question

嗯，這實際上是一個復雜的問題，標題的默認行為很簡單，它位於所有內容的前面，但是我想放置一個將其重疊的 div，在頁面上放置模糊，我的目標是標題落后於這個 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>

正如您在示例中所看到的， overlayDiv位於overlay之上，這正是我想要的，但它越過菜單，我想要的是菜單在它上方甚至是不透明的，這可能嗎？

編輯：

我想做一些相當復雜的事情，我會以其他方式解釋以試圖澄清。

頂部 div 到達那里時必須位於標題下方，並部分淡入其后面。

所以看起來它正在進入頁眉正下方的頁面，我想削減她的高度，但內容沒有得到想要的方式，例如：削減文本

編輯 2.0：

示例中顯示的文本的 div 確實必須在蒙版上方，而菜單在蒙版下方。

這個想法是，當 div 到達菜單的高度時，它會慢慢移過它，就像向下滑動菜單一樣

看起來像這樣

Answer 1

如果我理解正確的話，您想要overlayDiv和overlay之間的導航欄嗎？ 您可以通過調整z-index來做到這一點。 navbar的默認z-index為1030 ，因此將overlayDiv的z-index為更高的值，並將overlay的值設置為更低的值：

 .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>

編輯： z-index 在這種特殊情況下是正確的使用方式。

Answer 2

請檢查它是你想要的東西，我猜。

 .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

只需添加<div class="BlurDiv"> </div>

將 div 放在整個 html 周圍，因此無論您的頂部容器 div 是什么，例如，如果它是<div class="main-container"></div>

讓它像這樣：

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

然后創建您的模糊 CSS 並將其分配給 div id BlurDiv。

Answer 4

還有一個我發現有點棘手但滿足要求的其他解決方案，我向nav添加了與overlay相同的background 。 現在它將在文本上顯示白色背景以及進入“導航”。 這也將允許您單擊nav元素。

 .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

根據您的回答，我能夠想到一個可行的解決方案來解決問題，感謝您的承諾，我需要的是下面

 .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>