Javascript 文本始终在滑块后面移动

我有一个问题，一些文本，我想放在一个容器下面的滑块总是出现在滑块后面。我在CSS中尝试了不同的选项，但似乎无法移动文本

以下是该项目的示例：

下面您可以在JSFIDLE上找到html/css

文本应出现在部门A3L_标语中。我试过使用边距，但这并不能使它响应，对吗？ 简而言之。文本应显示在页面中心的旋转木马下方

希望任何人都能给我指出正确的方向或帮助我

正文{
宽度：100%；
保证金：0；
字体系列：“开放式sans”，无衬线；
缩放：1；
}
标题{
填充：20px0；
背景色：#ffffff；
盒影：0.4px 6px rgba（0,0,0,2）；
}
.集装箱{
填充：0 20px；
保证金：0自动；
}
.标志盒{
浮动：左；
右边距：20px；
}
.标志盒a{
大纲：无；
显示：块；
}
.logo框img{display:block；}
导航{
溢出：隐藏；
}
保险商实验室{
列表样式：无；
保证金：0；
填充：0px 10px 0px 0px；
浮动：对；
}
李海军{
显示：内联块；
左边距：25px；
高度：70像素；
线高：70px；
过渡：5s线性；
}
导航a{
文字装饰：无；
显示：块；
位置：相对位置；
颜色：#868686；
文本转换：大写；
}
导航a：之后{
内容：“；
宽度：0；
高度：2倍；
位置：绝对位置；
左：0；
底部：15px；
背景#8686；
过渡：宽度。5s线性；
}
导航a:悬停：在{宽度：100%；}之后
@媒体屏幕和屏幕（最大宽度：660像素）{
标题{文本对齐：居中；}
.标志盒{
浮动：无；
显示：内联块；
利润率：0.16px 0；
}
ul{float:none；}
nav li:类型{margin left:0；}的第一个
}
@媒体屏幕和屏幕（最大宽度：550px）{
导航{溢出：可见；}
李海军{
显示：块；
保证金：0；
高度：40px；
线高：40px；
}
导航李：悬停{背景：rgba（0,0,0,1）；}
导航a:在{content:none；}之后
}
#滑梯{
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
位置：固定；
宽度：100%；
高度：600px；
}
.幻灯片1{
背景：url(http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-159465.jpg)无重复中心固定；
}
.幻灯片2{
背景：url(http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-160434.png)无重复中心固定；
}
.幻灯片3{
背景：url(http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-150988.jpg)无重复中心固定；
}

$（函数（）{
$（'.fadein div:gt（0）'）.hide（）；
setInterval（函数（）{
$（'.fadein:first child'）.fadeOut（）.next（'div'）.fadein（）.end（）.appendTo（'.fadein'）；
}, 3500);
});







核心角色扮演社区

到

标记样式的流程将是固定的。而且你不应该在你的标记中使用多个同名ID，这是非常糟糕的，在不久的将来会引起很多问题

更新：

---

正如在评论中所讨论的，更好的解决方案是删除重复的div，并使用img标记，再加上在js和css上应用更改，以避免闪烁和溢出-x

您好，我刚刚这么做了，您的解决方案部分起作用。它会向下移动文本，但当滑块更改时，图片会在文本下方闪烁并向上返回。我尝试从所有幻灯片中删除id幻灯片，但这不起作用。删除id与闪烁无关，而是与一种非常糟糕的做法有关，即无论是使用类还是使用唯一id，都应避免这样做。这就是为什么称为id，之所以会发生闪烁，是因为您使用“显示”属性设置动画。然后表现和隐藏，这就是原因。如果答案解决了您的问题，请将其标记为解决方案；）。有没有一种简单的方法可以解决这个问题？由于我使用了特定的javascriptI，所以会出现闪烁现象。我自己没有尝试过，但我会说，将幻灯片添加为img标记，并作为img而不是背景img的一部分淡入。

#slide {
position: fixed; 
}

#slide{
position: relative;
}