Z-index CSS problem with different layers on fixed navbar
Question
I have a webpage with a navigation and a breadcrumb navigation bar. if i use a dropdown to open other links he opens the drop menu behind the breadcrumbnav How can i put this dropdown link before the breadcrumb navigation
The Breadcrumb must be in front of the body, so that breadcrumb & Navi are always on top
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 answers
solution1
1 2021-02-20 14:27:39
Add z-index:-1 to tophid
.tophid {
position: fixed;
background-color: #ffc900;
padding: 7px;
width: 100%;
opacity: 0.50;
z-index:-1;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
z-index layers in CSS
css z-index with multiple layers
CSS z-index glitchy layers
CSS: covering fixed element with z-index
Content goes over top of fixed navbar despite z-index
Can't hide fixed navbar with z-index
z-index does not work with links in different layers
Z-index problem
Problem with z-index
Css Navbar behind the content (z-index doesn't work)
Related Tags