我遇到了一些文本问题，我想将这些文本放在 slider 下方的容器中，而 slider 总是出现在 slider 后面。我在 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 应用更改以避免闪烁和 overflow-x。 https://codepen.io/anon/pen/eeymgo
关于javascript - 文本总是在 slider 后面移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47361103/