我正在使用 Bootstrap 在页面顶部生成固定的导航栏。除了一个问题之外，一切都工作正常。滚动时，页面的某些部分与导航栏重叠。整个页面主体被包裹在一个 div 中。
\n\n以下是该问题的图片。
\n\nhttps://i.stack.imgur.com/8eua5.jpg
\n\nHTML：
\n\n
<html>\n <head>\n <title>Bootstrap Example</title>\n <meta charset="utf-8">\n <meta name="viewport" content="width=device-width, initial-scale=1">\n <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">\n <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>\n <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>\n\n <title>Saasapp</title>\n <%= csrf_meta_tags %>\n <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">\n <%= stylesheet_link_tag \'application\', media: \'all\', \'data-turbolinks-track\': \'reload\' %>\n <%= javascript_include_tag \'application\', \'data-turbolinks-track\': \'reload\' %>\n\n <script>\n $(document).ready(function(){\n $(\'[data-toggle="tooltip"]\').tooltip(); \n });\n </script>\n </head>\n <body>\n\n <div class="navbar" id="navbar">\n\n <%= link_to "/", class: "navbar-logo" do %>\n <%= image_tag \'MGE_logo.png\', alt: \'a\'%>\n <% end %>\n <a class="" href="javascript:void(0)"></a>\n <a class=""><%= link_to "How it Works", "#" %></a>\n <a class=""><%= link_to "Course Directory", "#" %></a>\n <a class=""><%= link_to "Find Event", "#" %></a>\n <a class=""><%= link_to "Course Owners, Claim your Course!", "#" %></a>\n </div>\n\n <div class= "container">\n <% flash.each do |type, msg| %>\n <%= content_tag :div, msg, class: "alert alert-#{type}" %>\n <% end %>\n </div>\n </nav> \n\n\n <div class="content">\n <div class="maintop">\n <div class="maintopheader"> \n\n </div>\n <div class="maintopbody">\n <table style="width:100%">\n <tr>\n <td><p>Get quotes from dozen of courses<br>Fast and easy with no obligation<br></p>\n <%= link_to "Get Free Quotes Now \xc2\xbb",new_quote_path, class: \'homebutton\' %></a></td>\n <td>\n <p>Browse thousands of courses and find<br>the best course for your event<br></p>\n\n <%= link_to "Search Courses Now \xc2\xbb",new_quote_path, class: \'homebutton\' %></td>\n </tr>\n </table>\n </div>\n </div>\n\n <div class="content container"></div>\n <div class="mainbottom">\n <div class="row">\n <div class="col-md-3 mycol content">\n <%= image_tag("browseicon.png", class: \'content\') %>\n <p>Browse Courses to Find<br>the Perfect Venue</p>\n </div>\n <div class="col-md-3 mycol">\n <%= image_tag("formicon.png", class: \'\') %>\n <p>Fill Out a Form<br>in 5 Minutes</p>\n </div>\n <div class="col-md-3 mycol">\n <%= image_tag("bidicon.png", class: \'\') %>\n <p>Course Bid to Host<br>Your Event</p>\n </div>\n <div class="col-md-3 mycol">\n <%= image_tag("findicon.png", class: \'\') %>\n <p>Get the Perfect Venue<br>at the Lowest Cost</p>\n </div>\n </div>\n <a class="homebutton greenbutton" href="#" role="button">Learn More \xc2\xbb</a></td>\n <br>\n <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>\n <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>\n </div>\n </div>\n </div>\nCSS：
\n\nbody,h1,h2,h3 {\n font-family: \'Open Sans\', sans-serif;\n}\n\n\na.navbar-logo img {\n height: 48px;\n width: 150px;\n margin-bottom: 0px;\n margin-top: 0px;\n}\n\n#navbar .navbar-logo {\n padding-top: 0px;\n margin-bottom: 0px;\n}\n#navbar.navbar {\n margin-bottom: 0px;\n}\n\n.nav-link-custom {\n margin-top: 40px;\n padding-bottom: -20px;\n}\n.navbar-right-custom { \n color: #F47D00;\n padding-bottom: -20px;\n margin-top: 20px;\n float: right;\n font-size: 18px;\n vertical-align: middle;\n font-weight: bold;\n\n}\n\n.nav-bar-right-custom {\n color: #F47D00;\n float: right;\n vertical-align: top;\n}\n\n.navbar-container-bottom {\n height: 90px;\n margin-top: -8px;\n\n}\n\n.navbar-container-top {\n height: 50px;\n margin-top: -5px;\n}\n\n.footer-containter {\n padding-top: 30px;\n\n}\n\n.maintop {\n margin-top: 0px;\n height: 400px;\n background-image:url(\'/assets/home_background_image.jpg\');\n width: 100%;\n background-color: black; /* fallback color */\n background-position: center;\n background-size: cover;\n color: rgb(255,255,255); /*white*/\n}\n\n.maintopheader {\n font-weight: 700;\n font-size: 60px;\n text-align: center;\n text-shadow: 1px 1px #000000;\n padding-top: 50px;\n\n} \n\n.maintopbody {\n width: 100%;\n text-align: center;\n vertical-align: bottom;\n padding-top: 60px;\n font-size: 22px;\n font-weight: 500;\n}\n\n.jumbocol {\n color: rgb(255,255,255);\n font-size: 26px;\n text-align: center;\n}\n\n.homebutton {\n background-color: #F47D00; /* Orange */\n color: rgb(255,255,255);\n padding: 15px 32px;\n text-align: center;\n display: inline-block;\n font-size: 22px;\n font-weight: bold;\n border-radius: 2px;\n text-decoration: none;\n box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);\n text-shadow: 0px 0px #000000;\n &:hover {\n box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24);\n text-decoration: none;\n background-color: rgb(255,255,255); /* White */\n color: #F47D00;\n }\n}\n\n\n.greenbutton {\n background-color: #469F3B; /* Green */\n color: rgb(255,255,255);\n margin:auto;\n display:block;\n &:hover {\n background-color: rgb(105,105,105); /* White */\n color: rgb(255,255,255);\n text-decoration: none;\n }\n}\n\n.nobold label {\n font-weight: normal;\n}\n.formbutton {\n // background-color: #469F3B; /* Green */\n // color: rgb(255,255,255);\n opacity: 0.0;\n\n}\n.mycol {\n color: rgb(105,105,105); /*dark grey*/\n font-weight: Bold;\n font-size: 40;\n text-align: center;\n vertical-align: middle;\n}\n\n/* Tooltip */\n.Customtooltip + .tooltip > .tooltip-inner {\n background-color: rgba(70,159,59,0.2); /* Green */\n color: rgba(0,0,0,1.0);\n border: 1px solid green;\n padding: 15px;\n font-size: 14px;\n}\n\n/* Tooltip on top */\n.Customtooltip + .tooltip.top > .tooltip-arrow {\n border-top: 5px solid green;\n}\n\n/* Tooltip on bottom */\n.Customtooltip + .tooltip.bottom > .tooltip-arrow {\n border-bottom: 5px solid green;\n}\n\n/* Tooltip on left */\n.Customtooltip + .tooltip.left > .tooltip-arrow {\n border-left: 5px solid green;\n}\n\n/* Tooltip on right */\n.Customtooltip + .tooltip.right > .tooltip-arrow {\n border-right: 5px solid green;\n}\n#navbar {\n overflow: hidden;\n background-color: #A9A9A9;\n margin-bottom: 0px;\n}\n\n#navbar a {\n float: left;\n display: block;\n color: #303030;\n text-align: center;\n padding-top: 20px;\n padding-left: 16px;\n padding-right: 16px;\n text-decoration: none;\n font-size: 17px;\n height: 50px;\n}\n\n#navbar a:hover {\n background-color: #ddd;\n color: black;\n}\n\n#navbar a.active {\n background-color: #4CAF50;\n color: white;\n}\n\n.content {\n padding: 16px;\n}\n\n.sticky {\n position: fixed;\n top: 0;\n width: 100%;\n}\n\n.stickycontent {\n padding-top: 100px;\n}\n\nbody \n\n{ padding-top: 10px; background-color: ghostwhite;}\n第一件事是你的代码有很多错误。
也许您可以通过向z-index您的nav.
像这样
#navbar {
z-index: 9999;
}
| 归档时间： |
|
| 查看次数： |
4028 次 |
| 最近记录： |