0
おそらくかなり基本的な質問ですが、私はそれに問題があります。私が作っているウェブサイトのためにブートストラップデザインを使っています。デフォルトでは、ウェブサイトに画像スライダがありませんでした。上部にスペースを取るナビゲーションバー（ブートストラップ） - 私はデフォルトでスライダーの上に置くことができます
imgスライダーで追加した後は、ナビゲーションバーが常にその上に表示され、決してスライダーの上には表示されません。ここでは例です：
（私はスクロールしたときにそれが正常に動作していることに注意してくださいこれは、ページ 
をロードするとき、それは現時点でどのように見えるかであり、これは、私はあなたがページをロードするとき、それは見てみたい方法です少し下に） 
私のナビゲーションは基本的にうまくいくので、それはスライダーの上にはありません。
すべての.cssファイルを含めることにしました。スライダにイメージをリンクし、上部にあるNavbarを作成しました（Opacityは0.7です）。
私はちょうど開始時にスライダの上に座って、スクロールしながら（スクロールしてもスニペットでは動作しません）スクロールしながらすべての上に移動します。開始位置をスクロールするだけで問題が発生した場合でもうまく動作します。
また、スライダーの画像上に青いものがあることを心配しないでください。それはWIPです。 #header上position: absoluteを使用して
.slider {
box-shadow: 0px 4px 10px #9d9d9d;
padding: 0;
margin: 0;
max-width: 100%;
max-height: 600px;
margin: 0 auto;
overflow: hidden;
border-radius: 4px;
}
.slider ul {
width: 1000%;
height: 600px;
position: relative;
list-style: none;
left: 0;
margin: 0;
padding: 0;
line-height: 0;
-moz-animation:slide-animation 5s infinite;
-webkit-animation:slide-animation 25s infinite;
}
.slider li {
width: 10%;
list-style: none;
float: left;
margin: 0;
padding: 0;
}
img {
max-width: 100%;
border-radius: 4px;
}
span.desc1 {
position: absolute;
height: 240px;
width: 600px;
display: block;
font-size: 50px;
bottom: 250px;
left: 800px;
padding: 0.5px 20px 0px 20px;
margin-top: -450px;
overflow: hidden;
background-color:rgba(47, 118, 171, 0.7);
color: #fcfcfc;
font-family: "Roboto", Helvetica, Arial, sans-serif;
text-shadow: 0px 1px 1px #9d9d9d;
font-weight: normal;
border-radius: 4px;
z-index:2;
}
span.desc2 {
position: absolute;
height: 80px;
width: 300px;
display: block;
font-size: 0.8em;
bottom: 0;
padding: 0.5px 20px 0px 20px;
margin-top: -450px;
overflow: hidden;
background-color:rgba(47, 118, 171, 0.6);
color: #fcfcfc;
font-family: "Roboto", Helvetica, Arial, sans-serif;
text-shadow: 0px 1px 1px #9d9d9d;
font-weight: normal;
border-radius: 4px;
z-index:2;
}
p.desc{
color: #FFF;
}
@-webkit-keyframes slide-animation {
1% {left: 0%; opacity: 1;}
18% {left: 0%; opacity: 1}
19% {opacity: 0.2;}
20% {left: -100%; opacity: 1;}
58% {left: -100%; opacity: 1;}
59% {opacity: 0.2;}
60% {left: -200%; opacity: 1;}
98% {left: -200%; opacity: 1;}
99% {opacity: 0.5;}
100% {left: 0%;}
}
@-moz-keyframes slide-animation {
1% {left: 0%; opacity: 1;}
18% {left: 0%; opacity: 1}
19% {opacity: 0.2;}
20% {left: -100%; opacity: 1;}
58% {left: -100%; opacity: 1;}
59% {opacity: 0.2;}
60% {left: -200%; opacity: 1;}
98% {left: -200%; opacity: 1;}
99% {opacity: 0.5;}
100% {left: 0%;}
}
h1, h2, h3, h4, h5, h6 {
font-family: "Raleway", Helvetica, Arial, sans-serif;
}
p {
line-height: 1.55;
color: #333;
font-size: 400;
font-family: "Raleway", Helvetica, Arial, sans-serif;
}
h1 {
font-size: 62px;
}
h2 {
font-size: 30px;
margin-bottom: 65px;
}
h3 {
font-size: 24px;
}
h4 {
font-size: 18px;
}
/* ==================================================
General
================================================== */
a {
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
/* ==================================================
Elements
================================================== */
.btn {
background-color: #2f76ab;
font-family: "Roboto", Helvetica, Arial, sans-serif;
font-weight: 800;
color: #fff;
padding: 15px 45px;
border-radius: 50px;
}
.btn:hover {
background-color: #E04F00;
color: #fff;
}
.btn:focus {
color: #fff;
}
.btn-ghost {
border: 3px solid #fff;
background-color: transparent;
}
.btn-ghost:hover {
background-color: #fff;
color: #2f76ab;
}
section {
padding: 85px 0;
}
.card {
position: relative;
padding: 0;
border: 0;
border-radius: 0;
margin: 0;
overflow: hidden;
}
a:hover {
text-decoration: none !important;
}
.scrolltop {
display: none;
position: fixed;
bottom: 15px;
right: 15px;
width: 42px;
height: 42px;
border-radius: 50%;
background: #199EB8;
color: #fff;
text-align: center;
font-size: 24px;
}
.scrolltop:hover, .scrolltop:active, .scrolltop:focus {
color: #fff !important;
opacity: .75;
}
/* ==================================================
Hero Styling
================================================== */
.hero {
display: table;
position: relative;
background-image: url(../img/cover.jpg);
background-size: cover;
padding: 150px 0;
color: #fff;
width: 100%;
height: 100vh;
}
.hero:after {
content: '';
z-index: 0;
position: absolute;
background: rgba(0, 0, 0, 0.65);
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.hero .container {
position: relative;
z-index: 1;
text-align: center;
display: table-cell;
vertical-align: middle;
width: 100%;
}
.hero-brand {
margin-bottom: 75px;
display: inline-block;
}
.hero-brand:hover {
opacity: .75;
}
.tagline {
font-family: "Raleway", Helvetica, Arial, sans-serif;
font-size: 26px;
margin: 45px 0 75px 0;
color: #fff;
}
/* ==================================================
Header Styling
================================================== */
#header {
background: rgba(47, 118, 171, 0.7);
height: 70px;
}
#header #logo {
margin: 14px 25px 0 0;
}
#header #logo h1 {
font-size: 36px;
margin: 0;
padding: 2px 0;
line-height: 1;
font-family: "Raleway", Helvetica, Arial, sans-serif;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
}
#header #logo h1 a, #header #logo h1 a:hover {
color: #fff;
}
#header #logo img {
padding: 0;
margin: 0;
max-height: 40px;
}
@media (max-width: 768px) {
#header {
height: 50px;
}
#header #logo {
margin: 10px 0 0 0;
}
#header #logo h1 {
padding: 2px 0;
font-size: 26px;
}
#header #logo img {
max-height: 30px;
}
}
#header .social-nav {
margin-top: 15px;
}
#header .social-nav a {
font-size: 24px;
margin-left: 15px;
color: #fff;
}
#header .social-nav a:hover {
color: rgba(255, 255, 255, 0.75);
}
/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Nav Menu Essentials */
.nav-menu, .nav-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.nav-menu ul {
position: absolute;
display: none;
top: 100%;
left: 0;
z-index: 999;
}
.nav-menu li {
position: relative;
white-space: nowrap;
}
.nav-menu > li {
float: left;
}
.nav-menu li:hover > ul,
.nav-menu li.sfHover > ul {
display: block;
}
.nav-menu ul ul {
top: 0;
left: 100%;
}
.nav-menu ul li {
min-width: 180px;
}
/* Nav Menu Arrows */
.sf-arrows .sf-with-ul {
padding-right: 30px;
}
.sf-arrows .sf-with-ul:after {
content: "\f107";
position: absolute;
right: 15px;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
}
.sf-arrows ul .sf-with-ul:after {
content: "\f105";
}
/* Nav Meu Container */
#nav-menu-container {
margin: 0;
}
@media (max-width: 768px) {
#nav-menu-container {
display: none;
}
}
/* Nav Meu Styling */
.nav-menu a {
padding: 22px 15px 18px 15px;
text-decoration: none;
display: inline-block;
color: #fff;
font-family: "Roboto", Helvetica, Arial, sans-serif;
font-weight: 300;
font-size: 15px;
outline: none;
}
.nav-menu a:hover, .nav-menu li:hover > a, .nav-menu .menu-active > a {
color: rgba(255, 255, 255, 0.75);
}
.nav-menu ul {
margin: 4px 0 0 15px;
-webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.08);
box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.08);
}
.nav-menu ul li {
background: #fff;
border-top: 1px solid #f4f4f4;
}
.nav-menu ul li:first-child {
border-top: 0;
}
.nav-menu ul li:hover {
background: #199EB8;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
.nav-menu ul li a {
color: #333;
-webkit-transition: none;
-o-transition: none;
transition: none;
padding: 10px 15px;
}
.nav-menu ul li a:hover {
color: #fff;
}
.nav-menu ul ul {
margin: 0;
}
/* Mobile Nav Toggle */
#mobile-nav-toggle {
position: fixed;
right: 0;
top: 0;
z-index: 999;
margin: 8px 10px 0 0;
border: 0;
background: none;
font-size: 24px;
display: none;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
outline: none;
cursor: pointer;
}
#mobile-nav-toggle i {
color: #fff;
}
@media (max-width: 768px) {
#mobile-nav-toggle {
display: inline;
}
}
/* ==================================================
About styling
================================================== */
.about h2{
color: #2f76ab;
}
img.tbasr{
width: 50%;
height: 50%;
margin: 10px;
float: right;
}
img.tbasl{
width: 50%;
height: 50%;
margin: 10px;
float: left;
}
/* ==================================================
Features Styling
================================================== */
.features {
padding-bottom: 45px;
}
.features h2 {
color: #2f76ab;
}
.features img {
width: 50%;
height: 50%;
margin: 10px;
float: left;
}
/* Mobile Nav Styling */
#mobile-nav {
position: fixed;
top: 0;
padding-top: 18px;
bottom: 0;
z-index: 998;
background: rgba(0, 0, 0, 0.9);
left: -260px;
width: 260px;
overflow-y: auto;
-webkit-transition: 0.4s;
-o-transition: 0.4s;
transition: 0.4s;
}
#mobile-nav ul {
padding: 0;
margin: 0;
list-style: none;
}
#mobile-nav ul li {
position: relative;
}
#mobile-nav ul li a {
color: #fff;
font-size: 16px;
overflow: hidden;
padding: 10px 22px 10px 15px;
position: relative;
text-decoration: none;
width: 100%;
display: block;
outline: none;
}
#mobile-nav ul li a:hover {
color: #fff;
}
#mobile-nav ul li li {
padding-left: 30px;
}
#mobile-nav ul .menu-has-children i {
position: absolute;
right: 0;
z-index: 99;
padding: 15px;
cursor: pointer;
color: #fff;
}
#mobile-nav ul .menu-has-children i.fa-chevron-up {
color: #199EB8;
}
#mobile-nav ul .menu-item-active {
color: #199EB8;
}
#mobile-body-overly {
width: 100%;
height: 100%;
z-index: 997;
top: 0;
left: 0;
position: fixed;
background: rgba(0, 0, 0, 0.6);
display: none;
}
/* Mobile Nav body classes */
body.mobile-nav-active {
overflow: hidden;
}
body.mobile-nav-active #mobile-nav {
left: 0;
}
body.mobile-nav-active #mobile-nav-toggle {
color: #fff;
}
/* ==================================================
Stats Styling
================================================== */
.stats-row {
margin-top: 65px;
}
.stats-col .circle {
display: inline-block;
width: 160px;
height: 160px;
font-family: "Raleway", Helvetica, Arial, sans-serif;
font-weight: 500;
color: #666;
border: 6px solid #2f76ab;
border-radius: 50%;
padding: 55px 25px 0 25px;
position: relative;
}
.stats-col .circle .stats-no {
color: #fff;
width: 75px;
height: 75px;
line-height: 70px;
top: -25px;
right: -15px;
font-family: "Raleway", Helvetica, Arial, sans-serif;
font-size: 18px;
background-color: #E04F00;
position: absolute;
border-radius: 50%;
font-weight: 700;
}
/* ==================================================
Call-to-action Styling
================================================== */
.cta {
background-color: #2f76ab;
padding: 25px 0;
}
.cta h2 {
margin-bottom: 5px;
}
.cta h2,
.cta p {
color: #fff;
}
.cta p {
margin-bottom: 0;
opacity: .75;
}
.cta .btn-ghost {
position: relative;
top: 13px;
}
/* ==================================================
Portfolio Styling
================================================== */
.portfolio {
background-color: #edf6ff;
padding-bottom: 0;
}
.portfolio h2 {
color: #2f76ab;
margin-bottom: 25px;
}
.portfolio-grid {
margin-top: 65px;
}
.portfolio-grid .row {
margin: 0;
}
.portfolio-grid .row > div {
padding: 0;
}
.portfolio-grid .row > div .card img {
width: 100%;
}
.portfolio-grid .row > div .card .portfolio-over {
position: absolute;
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
top: 0;
left: 0;
text-align: center;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.portfolio-grid .row > div .card .portfolio-over > div {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.portfolio-grid .row > div .card .portfolio-over .card-title {
color: #fff;
font-size: 30px;
}
.portfolio-grid .row > div .card .portfolio-over .card-text {
color: #fff;
opacity: .75;
padding: 0 45px;
}
.portfolio-grid .row > div .card:hover .portfolio-over {
opacity: 1;
visibility: visible;
}
.portfolio img{
width: 50%;
height: 50%;
margin: 10px;
float: left;
}
/* ==================================================
Team Styling
================================================== */
.team h2 {
color: #199EB8;
}
.team .col-sm-3 {
padding: 0;
}
.team .card > a {
display: block;
}
.team .card img {
width: 100%;
}
.team .card h4 {
color: #fff;
text-transform: uppercase;
}
.team .card p {
font-size: 11px;
color: #fff;
opacity: .75;
margin: 0;
padding: 0 35px;
}
.team .card .social-nav {
margin-bottom: 45px;
}
.team .card .social-nav a {
color: #fff;
font-size: 16px;
margin: 0 4px;
}
.team .card .social-nav a:hover {
opacity: .75;
}
.team .card:hover .team-over {
opacity: 1;
visibility: visible;
}
.team .card:hover .card-title-wrap {
background-color: #199EB8;
}
.team .card:hover .card-title-wrap .card-title, .team .card:hover .card-title-wrap .card-text {
color: #fff;
}
.team .team-over {
padding-top: 45px;
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
top: 0;
left: 0;
text-align: center;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.team .card-title-wrap {
padding: 15px 25px;
position: relative;
z-index: 9;
background-color: #fff;
}
.team .card-title-wrap .card-title, .team .card-title-wrap .card-text {
font-family: "Raleway", Helvetica, Arial, sans-serif;
display: block;
margin: 0;
}
.team .card-title-wrap .card-title {
font-size: 24px;
color: #333;
}
.team .card-title-wrap .card-text {
font-size: 18px;
color: #999;
}
/* ==================================================
Contact Section
================================================== */
#contact {
background: #f7f7f7;
padding: 80px 0;
}
#contact h2 {
font-family: "Raleway", Helvetica, Arial, sans-serif;
color: #199EB8;
}
#contact .info i {
font-size: 32px;
color: #199EB8;
float: left;
}
#contact .info p {
padding: 0 0 10px 50px;
line-height: 24px;
}
#contact .form #sendmessage {
color: #199EB8;
border: 1px solid #199EB8;
display: none;
text-align: center;
padding: 15px;
font-weight: 600;
margin-bottom: 15px;
}
#contact .form #errormessage {
color: red;
display: none;
border: 1px solid red;
text-align: center;
padding: 15px;
font-weight: 600;
margin-bottom: 15px;
}
#contact .form #sendmessage.show, #contact .form #errormessage.show, #contact .form .show {
display: block;
}
#contact .form .validation {
color: red;
display: none;
margin: 0 0 20px;
font-weight: 400;
font-size: 13px;
}
#contact .form input, #contact .form textarea {
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
#contact .form button[type="submit"] {
background: #199EB8;
border: 0;
padding: 10px 24px;
color: #fff;
-webkit-transition: 0.4s;
-o-transition: 0.4s;
transition: 0.4s;
}
#contact .form button[type="submit"]:hover {
background: #23c2e1;
}
/* ==================================================
Footer Styling
================================================== */
.site-footer {
background-color: #111;
padding: 0;
}
.site-footer h2, .site-footer p {
color: #fff;
}
.site-footer p {
opacity: .75;
line-height: 2.0925;
}
.site-footer h2,
.site-footer .btn {
margin-bottom: 25px;
}
.site-footer .social-nav a {
color: #fff;
opacity: .25;
}
.site-footer .social-nav a:hover {
opacity: 1;
}
.site-footer .bottom {
background-color: #000;
padding: 20px 0;
}
.site-footer .bottom .list-inline, .site-footer .bottom p {
margin: 0;
}
.site-footer .bottom .list-inline {
position: relative;
top: 5px;
}
.site-footer .bottom .list-inline a {
color: #fff;
font-family: "Roboto", Helvetica, Arial, sans-serif;
margin-right: 15px;
}
.site-footer .bottom .list-inline a:hover {
color: #199EB8;
}
.site-footer .credits {
color: #ddd;
}
.site-footer .credits a {
color: #199EB8;
}
/* ==================================================
Responsive Styling
================================================== */
@media (max-width: 61.9em) {
section,
.block,
.cta {
padding: 35px 0;
}
.features {
padding-bottom: 5px;
}
p,
.block p {
margin: 0;
}
.hero-brand {
margin-bottom: 35px;
}
.tagline {
margin: 35px 0;
}
h1 {
font-size: 32px;
margin: 0;
}
h2,
.tagline {
font-size: 24px;
}
h2 {
margin-bottom: 25px;
}
h3 {
font-size: 14px;
}
.hero {
padding: 75px 0;
}
.stats-col {
margin-bottom: 25px;
}
.block {
height: auto;
}
.feature-col {
padding-bottom: 30px;
}
.portfolio-grid .card h3.card-title {
font-size: 18px !important;
}
.portfolio-grid .card .card-text {
font-size: 13px;
}
.team .team-over {
padding-top: 20px;
}
.team .card .social-nav {
margin-bottom: 15px;
padding: 0;
}
.site-footer .social-nav {
margin-bottom: 35px;
}
.site-footer .list-inline {
text-align: center;
padding-bottom: 15px;
}
.site-footer .list-inline li {
display: inline-block;
}
}
@media (max-width: 767px) {
.block {
padding-left: 30px;
padding-right: 30px;
}
}<!-- Header -->
<header id="header">
<div class="container">
<div id="logo" class="pull-left">
<a href="index.html"><img src="img/logo-nav.png" alt="" title="" /></img></a>
</div>
<nav id="nav-menu-container">
<ul class="nav-menu">
<li><a href="#about"><?php echo $lang['nav_tbas']; ?></a></li>
<li><a href="#features"><?php echo $lang['nav_hansaworld']; ?></a></li>
<li><a href="#team"><?php echo $lang['nav_solutions']; ?></a></li>
<li><a href="#portfolio"><?php echo $lang['nav_about']; ?></a></li>
<!--<li class="menu-has-children"><a href="">Drop Down</a>
<ul>
<li><a href="#">Drop Down 1</a></li>
<li class="menu-has-children"><a href="#">Drop Down 2</a>
<ul>
<li><a href="#">Deep Drop Down 1</a></li>
<li><a href="#">Deep Drop Down 2</a></li>
<li><a href="#">Deep Drop Down 3</a></li>
<li><a href="#">Deep Drop Down 4</a></li>
<li><a href="#">Deep Drop Down 5</a></li>
</ul>
</li>
<li><a href="#">Drop Down 3</a></li>
<li><a href="#">Drop Down 4</a></li>
<li><a href="#">Drop Down 5</a></li>
</ul>
</li>-->
<li><a href="#contact"><?php echo $lang['nav_contact']; ?></a></li>
<li><a href="http://ticket.sofido.net/login.php"><?php echo $lang['nav_support']; ?></a></li>
</ul>
</nav>
<!-- #nav-menu-container -->
<nav class="nav social-nav pull-right hidden-sm-down">
<a href="https://www.facebook.com/SOFIDOgroup/"><i class="fa fa-facebook"></i></a>
<a href="#contact"><i class="fa fa-envelope"></i></a>
</nav>
</div>
</header>
<!-- /header -->
<!-- Slider -->
<div class="slider">
<ul>
<li>
<img src="http://www.sofido.net/img/slider/sofido-slide-01.jpg" />
<span class="desc1">
<p class="desc1"><div id="slide01">You are awesome<div></p>
</span>
</li>
<li>
<img src="http://www.sofido.net/img/slider/sofido-slide-01.jpg" />
<span class="desc2">
<h4><br />Another caption title</h4>
<p class="desc">More lorem ipsum dolor...</p>
</span>
</li>
<li>
<img src="http://www.sofido.net/img/slider/sofido-slide-01.jpg" />
<span class="desc">
<h4><br />Another caption title</h4>
<p class="desc">More lorem ipsum dolor...</p>
</span>
</li>
</ul>
</div>
<!-- /Slider -->
ナビゲーションバーの位置は、スクロールするとjavascriptで設定されると仮定します。しかし、あなたは単に位置を設定することができます：固定;トップ：0;多分それはトリックを行います。そうでなければJavascriptをチェックしてください。 – deadfishli
ナビゲーションバーは、その設定に関係なくページの上部にあります。私が持っている問題は、スライダーがページの上に "背後に"行くのではなく、代わりに単にnavbarの下に座っていることです。 – David