Sliding Navの後ろに移動

私が私のmenubarをスクロールすると、それは他のセクションでうまくいきます。私はz-index 1を試しましたが、そのworking.pleaseは解決策を教えてくれませんでした。間違っている。 postion:fixedとライブデモhttp://40.86.75.38/download/slide/Sliding Navの後ろに移動

*{ 
    margin: 0; 
    padding: 0; 
} 

/* Top Menu Start Here */ 

.top_nav{ 
    height: 90px; 
    width: 100%; 
    background: rgba(0,0,0,.5); 
    position: fixed; 
    z-index: 1; 
    transition:all 0.7s ease; 
    -webkit-transition:all 0.7s ease; 
    -moz-transition:all 0.7s ease; 
    -o-transition:all 0.7s ease; 
    -ms-transition:all 0.7s ease; 
} 

.container{ 
    height: 100vh; 
    width: 100%; 
    max-width: 100%; 
    background-image: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ24kd_2tEzjbb_GdPnMQKog7lMCxtYmmy7dxjjpDr6d2ZseK-Dig"); 
    background-attachment: fixed; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
    top: 0; 
} 

.site-dt{ 
    background-color: #fff; 
    height: 573px; 
    width: 100%; 
} 


#slider-main{ 
    height: 578px; 
    width: 100%; 
    overflow: hidden; 
    background-attachment: fixed; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
} 

#slider-main #slider img{ 
    height: 100%; 
    width: 100%; 
} 

.section_about{ 
    height: 573px; 
    width: 100%; 
    background-color: #de5670; 
    overflow: hidden; 
    position: absolute; 
} 

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="main.css"> 
<Script type ="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
<script type="text/javascript" src="http://malsup.github.io/min/jquery.cycle2.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
</head> 
<header> 
    <div class="top_nav"> 
    </div> 
</header> 
<div class="container"> 
</div> 
<div id="slider-main"> 
<div id="slider" class="cycle-slideshow" 
    data-cycle-fx=scrollHorz 
    data-cycle-timeout=2000 
    > 
    <div class="cycle-pager"> 

    </div> 
<img src="http://malsup.github.io/images/p1.jpg"> 
    <img src="http://malsup.github.io/images/p2.jpg"> 
    <img src="http://malsup.github.io/images/p3.jpg"> 
    <img src="http://malsup.github.io/images/p4.jpg"> 
</div> 
</div> 
<div class="section_about"> 

</div> 
</html>

出典

2016-10-16 Rabner Casandara

スタイルのヘッダ要素とz-index

header{ 
    position:fixed; 
    z-index:777; 
}

出典

2016-10-16 14:36:50 Manjunath

感謝男uが、それは非常にシンプルな作り –

私は私が助けることができたうれしいです:) :) – Manjunath

body{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 

 
/* Top Menu Start Here */ 
 

 
header { 
 
    display: block; 
 
    height: 90px; 
 
    background: rgba(0,0,0,.5); 
 
} 
 

 
.container{ 
 
    display: block; 
 
    height: 100vh; 
 
    width: 100%; 
 
    background: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ24kd_2tEzjbb_GdPnMQKog7lMCxtYmmy7dxjjpDr6d2ZseK-Dig") no-repeat center; 
 
    background-size: cover; 
 
} 
 

 
.site-dt{ 
 
    background-color: #fff; 
 
    height: 573px; 
 
    width: 100%; 
 
} 
 

 

 
#slider-main{ 
 
    width: 100%; 
 
    overflow: hidden; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
} 
 

 
#slider-main #slider img{ 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
.section_about{ 
 
    height: 573px; 
 
    width: 100%; 
 
    background-color: #de5670; 
 
    overflow: hidden; 
 
    position: absolute; 
 
}

<html> 
 
<head> 
 
<link rel="stylesheet" type="text/css" href="main.css"> 
 
<Script type ="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
<script type="text/javascript" src="http://malsup.github.io/min/jquery.cycle2.min.js"></script> 
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
 
</head> 
 
<body> 
 
    <header></header> 
 
    <div class="container"></div> 
 
    
 
    <div id="slider-main"> 
 
    <div id="slider" class="cycle-slideshow" 
 
    data-cycle-fx=scrollHorz 
 
    data-cycle-timeout=2000 
 
    > 
 
    <div class="cycle-pager"> 
 

 
    </div> 
 
    <img src="http://malsup.github.io/images/p1.jpg"> 
 
    <img src="http://malsup.github.io/images/p2.jpg"> 
 
    <img src="http://malsup.github.io/images/p3.jpg"> 
 
    <img src="http://malsup.github.io/images/p4.jpg"> 
 
    </div> 
 
    </div> 
 
    <div class="section_about"> 
 

 
    </div> 
 
</body> 
 
</html>

出典

2016-10-16 14:36:49

Sliding Navの後ろに移動

答えて

関連する問題