html - 在 navbar-fixed-top 上添加一个渐变条。滚动时应隐藏渐变条

Question

我希望我的导航栏是 navbar-fixed-top。渐变条应该像附图一样位于导航栏的顶部。我试过这段代码，但是 navbar-fixed-top 类隐藏了它下面的渐变条，并且渐变条不再可见。我想要一个没有任何 jQuery 或 javascript 的纯 Css 解决方案。

body{ background: grey!important;
}
/*+++++++ COLOR BAR ++++++++*/
.color-bar{ width: 100%;
    	    height: 4px;	
            background: -webkit-linear-gradient(left, #f0c24b 0%, #b5d56a 20%, #ea7066 40%, #84bed6 60%, #a597e7 80%, #ea77ad 100%);
            background: -o-linear-gradient(left, #f0c24b 0%, #b5d56a 20%, #ea7066 40%, #84bed6 60%, #a597e7 80%, #ea77ad 100%);
            background: linear-gradient(to right, #f0c24b 0%, #b5d56a 20%, #ea7066 40%, #84bed6 60%, #a597e7 80%, #ea77ad 100%);
 } 

/*+++++++++ NAVBAR white */
.navbar {background-color: white; 	
}

/* iNCREASING NAVBAR SIZE */
.navbar-static-top, .navbar-header, .navbar-collapse { min-height: 105px !important ; }


/*++++++++++ NAVBAR BOTTOM DECORATION */
.nav-decor{ 
	width: 100%;
	position: absolute;
	height: 10px;
	left: 0px;
	bottom: -10px;
        background-image: url(../Images/shape.png); 
        background-repeat: repeat-x;}

.container-fluid{ padding-left: 5% !important;
	          padding-right: 5% !important;	
 }

 .navbar-nav{ position: absolute;
 	      right: 15%;
              top:30%;
	      font-size: 20px;
 }

.navbar-nav>li>a>span {
    padding: 0;
    line-height: 16px;
    text-align: center;
    text-transform: uppercase; 	 
}
.navbar-nav>li>a{ font-family: 'Londrina Solid', cursive;
		 letter-spacing: 2px;
    	          font-weight: 400;
 }

/*++++++++ NAVBAR LINKS COLOR +++++++*/
.color-1>a { color: #f26f29;}
.color-2>a { color: rgb(255, 186, 6); }
.color-3>a { color: #a9d63b; }
.color-4>a { color: #6ab3d1; }
.color-5>a { color: #907ee2; }
.color-6>a { color: #e868a7; }

<div class="container-fluid color-bar"></div>
	
<nav class="navbar navbav-default navbar-static-top" role="navigation">
		<div class="container-fluid">				
		<div class="navbar-header">					
			<a class="navbar-brand" href="#"><img src="Images/logo-xs.png" alt="Intelligram"></a>
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
		</div>
				
		<div class="collapse navbar-collapse">
			<ul class="nav navbar-nav navbar-right">	
				<li class="color-1 active">
					<a href="index.html">
						<span>Home</span>
					</a>
				</li>
				<li class="color-2">
					<a href="index.html">
					<span>Classes</span>
						</a>
					</li>
					<li class="color-3">
						<a href="index.html">
							<span>Pages</span>
						</a>
					</li>
					<li class="color-4">
						<a href="index.html">
							<span>Blogs</span>
						</a>
					</li>
					<li class="color-5">
						<a href="index.html">
							<span>Store</span>
						</a>
					</li>
					<li class="color-6">
						<a href="index.html">
							<span>Events</span>
						</a>
					</li>
				</ul>
		</div>

</div>			
<div class="nav-decor"></div>
</nav>

] 2 ] 2

Answer 1

查看 z-index feature的CSS。通过使用 z-index，您可以通过向前拉或向后推一些来确定源中不同层的优先级。

如果您将 CSS 行 z-index: 10; 添加到您的 .color-bar 类中，它应该将其拉到 z-index 小于 10(默认为 0)的任何内容的前面).