我遇到一些我想放在滑块下方的容器中的文本的问题，该文本始终出现在滑块的后面。我在CSS中尝试了其他选项，但似乎无法使文字动起来。
这是项目的示例：Example
您可以在下面找到jsfiddle上的html / css
文本应显示在div A3L_slogan中。我已经尝试过使用页边距，但这并不能使其具有响应性，对吗？
简而言之。文本应显示在页面中央的转盘下方。
希望任何人都可以指出正确的方向或帮助我
body {
width: 100%;
margin: 0;
font-family: 'open sans', sans-serif;
zoom: 1;
}
header {
padding: 20px 0;
background-color: #ffffff;
box-shadow: 0 4px 6px rgba(0,0,0,.2);
}
.container {
padding: 0 20px;
margin: 0 auto;
}
.logo-box {
float: left;
margin-right: 20px;
}
.logo-box a {
outline: none;
display: block;
}
.logo-box img {display: block;}
nav {
overflow: hidden;
}
ul {
list-style: none;
margin: 0;
padding: 0px 10px 0px 0px;
float: right;
}
nav li {
display: inline-block;
margin-left: 25px;
height: 70px;
line-height: 70px;
transition: .5s linear;
}
nav a {
text-decoration: none;
display: block;
position: relative;
color: #868686;
text-transform: uppercase;
}
nav a:after {
content: "";
width: 0;
height: 2px;
position: absolute;
left: 0;
bottom: 15px;
background: #868686;
transition: width .5s linear;
}
nav a:hover:after {width: 100%;}
@media screen and (max-width: 660px) {
header {text-align: center;}
.logo-box {
float: none;
display: inline-block;
margin: 0 0 16px 0;
}
ul {float: none;}
nav li:first-of-type {margin-left: 0;}
}
@media screen and (max-width: 550px) {
nav {overflow: visible;}
nav li {
display: block;
margin: 0;
height: 40px;
line-height: 40px;
}
nav li:hover {background: rgba(0,0,0,.1);}
nav a:after {content: none;}
}
#slide {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position:fixed;
width:100%;
height:600px;
}
.slide1 {
background: url(http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-159465.jpg) no-repeat center center fixed;
}
.slide2 {
background: url(http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-160434.png) no-repeat center center fixed;
}
.slide3 {
background: url(http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-150988.jpg) no-repeat center center fixed;
}<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function () {
$('.fadein div:gt(0)').hide();
setInterval(function () {
$('.fadein :first-child').fadeOut().next('div').fadeIn().end().appendTo('.fadein');
}, 3500);
});
</script>
</head>
<body>
<header>
<div class="container">
<div class="logo-box">
<a href="/">
<img src="images/logo.png">
</a>
</div>
<nav>
<ul>
<li><a href="">Forums</a></li>
<li><a href="">Rules</a></li>
<li><a href="">Monetization</a></li>
<li><a href="">Sign-up</a></li>
<li><a href="">Staff</a></li>
</ul>
</nav>
</div>
</header>
<div class="fadein">
<div id="slide"class="slide1"></div>
<div id="slide"class="slide2"></div>
<div id="slide"class="slide3"></div>
</div>
<div class="A3L_Slogan">
<div class="slogan_title">
Hardcore Roleplay Community
</div>
</div>
</body>
</html>最佳答案
#slide {
position: fixed;
}
至
#slide{
position: relative;
}
标记样式的流程将固定。而且您不应该在标记中使用多个具有相同名称的ID
slide，这非常糟糕，并且在不久的将来会引起麻烦。更新：
如评论中所述，更好的解决方案是删除重复的div，并使用img标签，并对js和css进行更改以避免闪烁和溢出-x。 https://codepen.io/anon/pen/eeymgo
关于javascript - 文字总是在滑块后面移动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47361103/