可能是非常基本的问题,但我遇到了问题。我正在为我正在制作的网站使用bootstrap设计。默认情况下,网站没有任何图像滑块。
在img滑块中添加后,我的导航栏总是在它上面,而且从不在我不喜欢的滑块上。这是一个例子:
这就是我在加载页面时希望它看起来的样子(请注意,当我向下滚动时它工作正常)
基本上我的导航工作得很好,它不在滑块的顶部。
我将包含包含所有内容的整个.css文件,我将图像链接到滑块并创建位于顶部的导航栏(不透明度为0.7)。
我只想让它在开始时位于滑块顶部,并在滚动时继续处于所有内容的顶部(注意滚动在代码段中不起作用)。滚动时只是起始位置是我遇到的问题。
另外不要担心滑块上图像上的蓝色内容。这是WIP。
.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 -->
答案 0 :(得分:0)
在position: absolute
上使用#header
会将其从静态布局流程中取出,滑块应该滑动&#34;起来,所以说。您还需要指定宽度,因为它不在流程中:width: 100%
或width: 100vw
应该有效。为了更好地衡量,您还应添加top: 0
和left: 0
。
您可能还需要设置z-index
。
注意,我对Bootstrap不是很熟悉,可能还有更多的&#34; Bootstrap-way&#34;要做到这一点,但它应该工作。
另请注意,我不知道这是否会影响插件,您使用,这会使标题修复。