Z-index CSS 問題與固定導航欄上的不同層
[英]Z-index CSS problem with different layers on fixed navbar
問題描述
我有一個帶有導航和面包屑導航欄的網頁。 如果我使用下拉菜單打開其他鏈接，他會打開面包屑導航后面的下拉菜單我如何將此下拉鏈接放在面包屑導航之前
面包屑必須在身體前面，這樣面包屑和導航總是在最前面
HTML，CSS，JS ：
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script> <html> <head> <title>CSS Layers</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <div class='backgr'> <div id='nbar' class='topnav'><a href="javascript:void(0);" onclick="ShowMenu('bubble');">Dropdown Link</a> <div id='bubble' class='hidden'> <a href='#'>Sublink 1</a><br /> <a href='#'>Sublink 2</a><br /> <a href='#'>Sublink 3</a> </div></div> <br /><br /><br /><br /> <div class='tophid'>Link1 / Link2 / Link3</div> <br /><br /> </div> <div class='content'> <br /> <br /> <br /> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </div> </body> </html> <style> BODY{ margin:0px; } #nbar{ position:fixed; heigzht:80px; background-color:#DDD; width:100%; padding:20px; }.backgr{ background-color:#fff; position:fixed; z-index:0; height:100px; width:100%; }.tophid { position:fixed; background-color:#ffc900; padding:7px; width:100%; opacity:0.50; }.content{ height:120%; z-index:-1; } #bubble{ z-index:4; }.hidden{ display:none; } </style> <script language='javascript'> function ShowMenu(id,out=''){ if($('#' + id).hasClass('hidden')) { $('#' + id).show(); $('#' + id).removeClass('hidden'); } else{ $('#' + id).hide(); $('#' + id).addClass('hidden'); } } </script>
1 個解決方案
解決方案1
1 2021-02-20 14:27:39
將 z-index:-1 添加到 tophid
.tophid {
position: fixed;
background-color: #ffc900;
padding: 7px;
width: 100%;
opacity: 0.50;
z-index:-1;
}
CSS中的z-index層
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.