在肚脐固定顶部添加一个渐变条.滚动时应隐藏渐变条

Question

我想我的导航条是肚脐固定顶部。渐变栏应该在导航栏的顶部，就像在附加图像中一样。我尝试过这段代码，但是导航条固定的顶部类隐藏了渐变栏下面的渐变条，并且渐变栏不再可见。我想要一个没有任何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

查看CSS的功能。通过使用z索引，您可以将源中的不同层按轻重缓急排列，方法是向前移动或向后推一些。

如果将CSS行z-index: 10;添加到. class类中，则应该在z索引低于10 (默认值为0)的任何情况下将其拉出。