为什么这个 <div> 悬停在其他一切之上，如何解决这个问题？

Question

JSFiddle here!

有一个div .background-image-div（包含一个span持有全屏背景图片）position:fixed，所以它不会随着页面内容滚动。

页面内容的其余部分 hovering/stacked 显示在背景图片的顶部。我附上的图片显示了我在 HTML 的不同元素上应用的问题和位置。

问题的一些解释：

problems/my题可以分为两类：

包含动画文本的 ul，以及其余内容（图中橙色边框div）应该在flow中。

By "in the flow", I mean they should appear where they are coded in the markup, that is the orange bordered div after the blue bordered ul. But what is happening is that the blue bordered ul is "out of flow" - it does not appear where it was written in the markup, but is hovering over everything else.
我希望蓝色边框 ul 出现在 viewport（完全没有向下滚动的屏幕），和橙色 boredered div 应该出现在它之后 - 所以它直到我们向下滚动页面。

现在我想我必须使用 JQuery 获得 window 高度，并且将该值的 margin-top 应用于橙色边框 div，（还有类似蓝色边框 ul 的东西）- 所以我会得到稍后再说。但是如果你能提出一个 CSS 的唯一解决方案，请做。

Answer 1

你可以为除图片之外的所有内容创建另一个容器，并将所有内容放入其中，就像这样Updated JSFiddle，首先是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>

有了这个 HTML，你在 .fixed-container 中分离了背景，所以它不会向下滚动，而 .absolute-container 中的所有内容，你现在需要的是使用此样式

设计 .absolute-container

.absolute-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

这将使容器的大小与屏幕大小相同。然后对于 .blinking-title-ul

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

这将使 ul 具有全屏宽度，然后从 bottom 出现 100px 并具有 100px 的 height，最后是 .other-content

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

这将使它从 top 显示 100% 的 .absolute-container 高度紧接在 .blinking-title-ul

之后

Answer 2

终于到了！

所以我们对您的布局做了一些重写。为了使它更容易一些，我们可以创建一个 div 作为我们占用 height: 100%; 的页面。在此我们可以 position: absolute; 底部的 ul 元素。

接下来我们将文本内容放在第一个页面元素下，通过一些样式我们放置 width: 90% 并使用 margin: 10px auto; 将其居中，这让我们可以看到 [=13= 周围的背景].

对于背景，我们可以将它放在 body 上，并通过这一小段代码使用整个页面来调整它的大小。

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

我们准备好了！如有任何问题，请告诉我。

html,
body {
  height: 100%;
  margin: 0;
  background: url(http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/images/2.jpg) no-repeat center center fixed;
  background-size: cover;
}
.firstPage {
  height: 100%;
}
.title-slideshow-ul {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 100px;
  list-style: none;
  margin: 0px;
  padding: 0;
}
.title-slideshow-ul li div {
  position: absolute;
  width: 100%;
  line-height: 100px;
  text-align: center;
  opacity: 0;
  color: red;
  -webkit-animation: titleAnimation 36s linear infinite 0s;
  -moz-animation: titleAnimation 36s linear infinite 0s;
  -o-animation: titleAnimation 36s linear infinite 0s;
  -ms-animation: titleAnimation 36s linear infinite 0s;
  animation: titleAnimation 36s linear infinite 0s;
}
.title-slideshow-ul li div h3 {
  font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
  font-size: 40px;
  padding: 0;
  margin: 0;
  text-transform: uppercase;
}
.content-other-than-slider {
  width: 90%;
  margin: 10px auto;
  padding: 20px;
  background: white;
}
/**********************************************************************/

/*title Animations*/

.title-slideshow-ul li:nth-child(2) div {
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -o-animation-delay: 6s;
  -ms-animation-delay: 6s;
  animation-delay: 6s;
}
.title-slideshow-ul li:nth-child(3) div {
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  -o-animation-delay: 12s;
  -ms-animation-delay: 12s;
  animation-delay: 12s;
}
.title-slideshow-ul li:nth-child(4) div {
  -webkit-animation-delay: 18s;
  -moz-animation-delay: 18s;
  -o-animation-delay: 18s;
  -ms-animation-delay: 18s;
  animation-delay: 18s;
}
.title-slideshow-ul li:nth-child(5) div {
  -webkit-animation-delay: 24s;
  -moz-animation-delay: 24s;
  -o-animation-delay: 24s;
  -ms-animation-delay: 24s;
  animation-delay: 24s;
}
.title-slideshow-ul li:nth-child(6) div {
  -webkit-animation-delay: 30s;
  -moz-animation-delay: 30s;
  -o-animation-delay: 30s;
  -ms-animation-delay: 30s;
  animation-delay: 30s;
}
/* Animation for the title */

@-webkit-keyframes titleAnimation {
  0% {
    opacity: 0
  }
  8% {
    opacity: 1
  }
  17% {
    opacity: 1
  }
  25% {
    opacity: 0
  }
  100% {
    opacity: 0
  }
}
@-moz-keyframes titleAnimation {
  0% {
    opacity: 0
  }
  8% {
    opacity: 1
  }
  17% {
    opacity: 1
  }
  25% {
    opacity: 0
  }
  100% {
    opacity: 0
  }
}
@-o-keyframes titleAnimation {
  0% {
    opacity: 0
  }
  8% {
    opacity: 1
  }
  17% {
    opacity: 1
  }
  25% {
    opacity: 0
  }
  100% {
    opacity: 0
  }
}
@-ms-keyframes titleAnimation {
  0% {
    opacity: 0
  }
  8% {
    opacity: 1
  }
  17% {
    opacity: 1
  }
  25% {
    opacity: 0
  }
  100% {
    opacity: 0
  }
}
@keyframes titleAnimation {
  0% {
    opacity: 0
  }
  8% {
    opacity: 1
  }
  17% {
    opacity: 1
  }
  25% {
    opacity: 0
  }
  100% {
    opacity: 0
  }
}

<div class="firstPage">
  <ul class="title-slideshow-ul">
    <li>
      <div>
        <h3>re·lax·a·tion</h3>

      </div>
    </li>
    <li>
      <div>
        <h3>qui·e·tude</h3>

      </div>
    </li>
    <li>
      <div>
        <h3>bal·ance</h3>

      </div>
    </li>
    <li>
      <div>
        <h3>e·qua·nim·i·ty</h3>

      </div>
    </li>
    <li>
      <div>
        <h3>com·po·sure</h3>

      </div>
    </li>
    <li>
      <div>
        <h3>se·ren·i·ty</h3>

      </div>
    </li>
  </ul>
</div>
<div class="content-other-than-slider">
  <p>Lorem ipsum dolor sit amet, ne errem laboramus vulputate ius, ei sonet fierent qui. Nusquam concludaturque in eos. Te laudem vivendo reformidans vix, ne tantas prompta quaestio vis, illud instructior ne usu. Ei cum velit ceteros principes, et pri tollit
    nusquam.</p>
  <p>Vim mucius consequat ei, nihil voluptua per at. Elitr dolorum definitiones ea est, et eum tacimates imperdiet, no duo partem molestie. Pri saperet accusamus ut. Eirmod tacimates efficiantur per eu.</p>
  <p>Ea recusabo assueverit nec, ex quot ipsum definiebas nam, quot velit dissentiunt vim ne. Magna eligendi accommodare mei et, per aperiri saperet fuisset ex. Cum essent delicatissimi id, sed ea unum scripserit complectitur, duo ad partem fuisset percipit.
    Nam quas graeco lucilius ex, legere doming et nam, usu id oportere efficiendi. Unum dictas elaboraret mei ut. Te tota invidunt postulant usu, usu affert facilis verterem ei.</p>
</div>

为什么这个 <div> 悬停在其他一切之上，如何解决这个问题？

Why is this <div> hovering over everything else, and how to solve this?

css

jquery

position

css-position