如何使这个导航栏重叠横幅而不破坏导航栏的设计，滚动时导航栏必须遵循？
＆＃13;
＆＃13;
＆＃13;
＆＃13;
/*transfonter*/
@font-face {
font-family: 'fontawesomeregular';
src: url('.../font/fontawesome/fontawesome-webfont.woff2') format('woff2'),
url('.../font/fontawesome/fontawesome-webfont.woff') format('woff');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Garamond Premiere Pro';
src: url('../font/garamond_premier_pro_bold/GaramondPremrPro-Bd.eot');
src: url('../font/garamond_premier_pro_bold/GaramondPremrPro-Bd.eot?#iefix') format('embedded-opentype'),
url('../font/garamond_premier_pro_bold/GaramondPremrPro-Bd.woff') format('woff'),
url('../font/garamond_premier_pro_bold/GaramondPremrPro-Bd.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
/*general*/
.font-Awesome{font-family: 'fontawesomeregular';}
.font-GaramondPremierePro{font-family: 'Garamond Premiere Pro';}
.font-CormorantGaramond{font-family: 'Cormorant Garamond', serif;}
.font-GreatVibes{font-family: 'Great Vibes', cursive;}
.white{color: #ffffff;}
.magenta{color:#ad1a33;}
/*Header by order*/
/*navbar*/
#header .navbar{background-color:black;background: rgba(0,0,0,0.6); border:none;min-height:82px;border-radius: 0;position: absolute;left:0;position: fixed;z-index: 2;right:0;}
#header .nav a{color:white; font-family: 'font-GaramondPremierePro';}
#header .nav {padding: 1% 15%;}
#header .navbar-header a{font-size:24px;margin-top: 3%;margin-left: 50%;color: white;}
/*carousel*/
#header .header-banner{ width:100%; height:663.31px; padding:0px !important; top:0; }
#header .header-banner-graydiv{background-color: black; background: rgba(0,0,0,0.5); position: absolute; top: 0%; left: 0; right: 0; vertical-align: middle;
text-align: center; horizontal-align: middle; margin: 14% 15% 9% 15%; bottom: 0%; padding: 4%;}
#header .header-banner-graydiv h3{font-size: 50px;}
#header .header-banner-graydiv h1{font-size:92px;}
#header .header-banner-graydiv h4{font-size: 39px;margin-top: -2%;margin-bottom:4%; display: inline-flex;
align-items: center;}
#header .header-banner-graydiv h4::before,.carousel-inner .header-banner-graydiv h4::after{ content: "";width: 76px;height: 4px;background: #ffffff;margin: 5px;}
#header .header-banner-graydiv p{font-size:20px;}
/*subscribe*/
/*Content by Order*/
/*Footer by Order*/
/*RESPONSIVENESS*/
/*MOBILE*/
@media screen and (max-width: 767px)
{
}
/*TABLET*/
@media screen (min-width: 768px) and (max-width: 991px)
{
}
/*DESKTOP*/
@media screen and (min-width: 992px)
{
}
/*Custom*/
@media screen and (max-width: 1305px)
{
#header .nav {margin: auto 0;padding: 0;}
#header .navbar-header a{margin: auto 0;}
#header .navbar{padding-top: 15px}
}<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" type="text/css" href="css/custom.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<meta name="viewport" content="width=device-width initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond|EB+Garamond|Great+Vibes" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!--header-->
<div id="header">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand font-GreatVibes" href="#">Your Company Name</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="/">HOME</a></li>
<li><a href="/">ABOUT</a></li>
<li><a href="/">SERVICES</a></li>
<li><a href="/">BLOG</a></li>
<li><a href="/">CONTACT</a></li>
<li><a href="/"><i class="fa fa-search" title="fafa"></i></a></li>
</ul>
</div>
</div>
</nav>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://images.alphacoders.com/469/46961.jpg" class="header-banner" >
<div class="header-banner-graydiv">
<h3 class="font-GaramondPremierePro white">WELCOME TO</h3>
<h1 class="font-GreatVibes white">Your Restaurant Name</h1>
<h4 class="font-GaramondPremierePro white">FOOD & RESTAURANT</h4>
<p class="font-CormorantGaramond white">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <br> tempor incididunt ut labore et dolore magna. aliqua. Ut enim ad minim </p>
</div>
</div>
<div class="item">
<img src="https://images4.alphacoders.com/769/76996.jpg" class="header-banner" >
<div class="header-banner-graydiv">
<h3 class="font-GaramondPremierePro white">WELCOME TO</h3>
<h1 class="font-GreatVibes white">Your Restaurant Name</h1>
<h4 class="font-GaramondPremierePro white">FOOD & RESTAURANT</h4>
<p class="font-CormorantGaramond white">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <br> tempor incididunt ut labore et dolore magna. aliqua. Ut enim ad minim </p>
</div>
</div>
<div class="item">
<img src="https://images.alphacoders.com/469/46961.jpg" class="header-banner" >
<div class="header-banner-graydiv">
<h3 class="font-GaramondPremierePro white">WELCOME TO</h3>
<h1 class="font-GreatVibes white">Your Restaurant Name</h1>
<h4 class="font-GaramondPremierePro white">FOOD & RESTAURANT</h4>
<p class="font-CormorantGaramond white">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <br> tempor incididunt ut labore et dolore magna. aliqua. Ut enim ad minim </p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!--end of header-->
<!--content-->
<!--end of content-->
<!--footer-->
<!--end of footer-->
</body>
</html>
导航栏和横幅必须位于顶部，但导航栏必须与横幅重叠。用户滚动时，导航栏也必须跟随。如果你可以帮助我：在屏幕调整大小时如何使横幅和横幅内的灰色div都响应？
我的导航栏已自动启动，很难修复其他元素的响应能力。
html代码：
<!--header-->
<div id="header">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand font-GreatVibes" href="#">Your Company Name</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="/">HOME</a></li>
<li><a href="/">ABOUT</a></li>
<li><a href="/">SERVICES</a></li>
<li><a href="/">BLOG</a></li>
<li><a href="/">CONTACT</a></li>
<li><a href="/"><i class="fa fa-search" title="fafa"></i></a></li>
</ul>
</div>
</div>
</nav>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="img/head_banner.jpg" class="header-banner" >
<div class="header-banner-graydiv">
<h3 class="font-GaramondPremierePro white">WELCOME TO</h3>
<h1 class="font-GreatVibes white">Your Restaurant Name</h1>
<h4 class="font-GaramondPremierePro white">FOOD & RESTAURANT</h4>
<p class="font-CormorantGaramond white">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <br> tempor incididunt ut labore et dolore magna. aliqua. Ut enim ad minim </p>
</div>
</div>
<div class="item">
<img src="img/sample_carousel1.jpg" class="header-banner" >
<div class="header-banner-graydiv">
<h3 class="font-GaramondPremierePro white">WELCOME TO</h3>
<h1 class="font-GreatVibes white">Your Restaurant Name</h1>
<h4 class="font-GaramondPremierePro white">FOOD & RESTAURANT</h4>
<p class="font-CormorantGaramond white">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <br> tempor incididunt ut labore et dolore magna. aliqua. Ut enim ad minim </p>
</div>
</div>
<div class="item">
<img src="img/sample_carousel2.jpg" class="header-banner" >
<div class="header-banner-graydiv">
<h3 class="font-GaramondPremierePro white">WELCOME TO</h3>
<h1 class="font-GreatVibes white">Your Restaurant Name</h1>
<h4 class="font-GaramondPremierePro white">FOOD & RESTAURANT</h4>
<p class="font-CormorantGaramond white">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <br> tempor incididunt ut labore et dolore magna. aliqua. Ut enim ad minim </p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!--end of header-->
CSS：
*general*/
.font-Awesome{font-family: 'fontawesomeregular';}
.font-GaramondPremierePro{font-family: 'Garamond Premiere Pro';}
.font-CormorantGaramond{font-family: 'Cormorant Garamond', serif;}
.font-GreatVibes{font-family: 'Great Vibes', cursive;}
.white{color: #ffffff;}
.magenta{color:#ad1a33;}
/*Header by order*/
/*navbar*/
#header .navbar{background-color:black;background: rgba(0,0,0,0.6); border:none;min-height:82px;border-radius: 0;}
#header .nav a{color:white; font-family: 'font-GaramondPremierePro';}
#header .nav {padding: 1% 15%;}
#header .navbar-header a{font-size:24px;margin-top: 3%;margin-left: 50%;color: white;}
/*carousel*/
#header .header-banner{ width:100%; height:663.31px; padding:0px !important; top:0; }
#header .header-banner-graydiv{background-color: black; background: rgba(0,0,0,0.5); position: absolute; top: 0%; left: 0; right: 0; vertical-align: middle;
text-align: center; horizontal-align: middle; margin: 14% 15% 5% 15%; bottom: 0%; padding: 4%;}
#header .header-banner-graydiv h3{font-size: 50px;}
#header .header-banner-graydiv h1{font-size:92px;}
#header .header-banner-graydiv h4{font-size: 39px;margin-top: -2%;margin-bottom:4%; display: inline-flex;
align-items: center;}
#header .header-banner-graydiv h4::before,.carousel-inner .header-banner-graydiv h4::after{ content: "";width: 76px;height: 4px;background: #ffffff;margin: 5px;}
#header .header-banner-graydiv p{font-size:20px;}
我的导航栏看起来像这样：
但它应该是这样的：
1 个答案:
答案 0 :(得分：1)
如果没有一个有效的例子，很难回答，但是你尝试过：
#header .navbar {
position: absolute;
width: 100%;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
z-index: 1;
}
这会将导航栏放在内容上方，并将背景设置为半透明的深灰色/黑色。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？