Jquery 这是为什么<；部门>；盘旋在其他一切之上，如何解决这个问题？

有一个

div.background image div

（包含一个

span

保存全屏背景图像）的

位置：fixed

，因此它不会随页面内容滚动

页面内容的其余部分将悬停/堆叠在背景图像的顶部。我所附的图片显示了我应用于HTML不同元素的问题和位置

关于问题的一些解释：

问题/我的问题可分为两类：

包含动画文本和其他内容的

ul

（图中橙色边框的

div

）应该在流中

通过流中的，，我的意思是它们应该出现在编码的地方 在标记中，这是蓝色后面的橙色边框

div

带边框的

ul

。但是现在发生的是蓝边的

ul

是 “流外”-它不显示在标记中写入的位置，而是悬停在其他所有内容上

我希望蓝色边框的

ul

显示在 视口（完全不向下滚动的屏幕）、和橙色 boredered

div

应该出现在它的后面-因此直到 我们在页面上向下滚动

现在我想我必须使用JQuery和 将该值的

边距顶部

应用于橙色边框的

div

， （蓝色边框的

ul

上也有类似的内容）-所以我会 以后再说吧。但是如果你能建议一个CSS专用的解决方案，请 做

---

您可以为除图像之外的所有内容创建另一个容器，并将所有内容放在其中，如下所示，首先是

HTML

<div class="fixed-container">
    <span class="background">Transparent Text</span>
</div>
<div class="absolute-container">
    <ul class="blinking-title-ul">
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ul>
    <div class="other-content">
        Content Dolor Sit Amet ...
    </div>
</div>

这将使容器的大小与屏幕大小相同。然后对于

。闪烁标题ul

.blinking-title-ul {
    position: absolute;
    left: 0;
    right: 0;
    height: 100px;
    bottom: 100px;
}

这将使

ul

具有全屏宽度，然后从

底部出现
100px
，并具有
高度
100px
，最后显示为
。其他内容

.other-content {
    position: relative;
    top: 100%;
}

这将使它出现在
绝对容器的
100%
的
顶部
。绝对容器的高度正好在
之后。闪烁的标题ul
最终到达那里

.blinking-title-ul {
    position: absolute;
    left: 0;
    right: 0;
    height: 100px;
    bottom: 100px;
}

所以我们对你的布局做了一点修改。为了使它更简单，我们可以创建一个
div
，作为我们占据
高度的页面：100%。在此我们可以
位置：绝对底部的
ul
元素

接下来，我们将文本内容放在第一个页面元素下，通过一些样式，我们放置了一个
宽度：90%
，并使用
边距：10px auto将其居中
这让我们可以看到
div
周围的背景

对于背景，我们可以将其放置在
正文
上，并使用带有这一小块代码的整个页面调整其大小

background: url(http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/images/2.jpg) no-repeat center center fixed;
background-size: cover;

我们可以走了！有什么问题就告诉我


html，
身体{
身高：100%；
保证金：0；
背景：url(http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/images/2.jpg)无重复中心固定；
背景尺寸：封面；
}
.首页{
身高：100%；
}
.标题幻灯片{
位置：绝对位置；
底部：0；
左：0；
右：0；
保证金：自动；
宽度：100%；
高度：100px；
列表样式：无；
边际：0px；
填充：0；
}
.标题幻灯片ul li div{
位置：绝对位置；
宽度：100%；
线高：100px；
文本对齐：居中；
不透明度：0；
颜色：红色；
-webkit动画：标题动画36s线性无限0；
-moz动画：标题动画36s线性无限0s；
-o动画：标题动画36s线性无限0s；
-ms动画：标题动画36s线性无限0s；
动画：标题动画36s线性无限0s；
}
.标题幻灯片ul li div h3{
字体系列：“BebasNeueRegular”、“Arial窄字体”、Arial、无衬线字体；
字体大小：40px；
填充：0；
保证金：0；
文本转换：大写；
}
.滑块以外的内容{
宽度：90%；
利润率：10px自动；
填充：20px；
背景：白色；
}
/**********************************************************************/
/*标题动画*/
.标题幻灯片ul li:n儿童（2）组{
-webkit动画延迟：6s；
-moz动画延迟：6s；
-o-动画延迟：6s；
-ms动画延迟：6s；
动画延迟：6秒；
}
.标题幻灯片ul li:n儿童（3）组{
-webkit动画延迟：12秒；
-moz动画延迟：12s；
-o-动画延迟：12s；
-ms动画延迟：12s；
动画延迟：12秒；
}
.标题幻灯片ul li:n儿童（4）组{
-webkit动画延迟：18秒；
-moz动画延迟：18s；
-o-延时：18s；
-ms动画延迟：18s；
动画延迟：18秒；
}
.标题幻灯片ul li:n儿童（5）组{
-webkit动画延迟：24秒；
-moz动画延迟：24秒；
-o-动画延迟：24秒；
-毫秒动画延迟：24秒；
动画延迟：24秒；
}
.标题幻灯片ul li:n儿童（6）组{
-webkit动画延迟：30秒；
-moz动画延迟：30s；
-o-动画延迟：30秒；
-毫秒动画延迟：30秒；
动画延迟：30秒；
}
/*标题为动画*/
@-webkit关键帧标题动画{
0% {
不透明度：0
}
8% {
不透明度：1
}
17% {
不透明度：1
}
25% {
不透明度：0
}
100% {
不透明度：0
}
}
@-moz关键帧标题动画{
0% {
不透明度：0
}
8% {
不透明度：1
}
17% {
不透明度：1
}
25% {
不透明度：0
}
100% {
不透明度：0
}
}
@-o关键帧标题动画{
0% {
不透明度：0
}
8% {
不透明度：1
}
17% {
不透明度：1
}
25% {
不透明度：0
}
100% {
不透明度：0
}
}
@-ms关键帧标题动画{
0% {
不透明度：0
}
8% {
不透明度：1