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

时间：2015-03-30 08:46:41

标签： jquery css css3 position css-position

JSFiddle here!

div .background-image-div有一个span（包含position:fixed全屏幕背景图片）ul，因此不会滚动页面内容。

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

enter image description here

关于问题的一些解释：

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

  1. 包含动画文字的div以及其他内容 （图中的橙色边框div）应该在流程中。

      

    通过“in the flow”，我的意思是它们应该出现在编码的位置   在标记中，在蓝色之后是橙色边框ul   有界ul。但正在发生的是蓝色边界ul   “out of flow” - 它没有出现在标记中的位置，而是悬停在其他所有内容上。

  2. 我希望蓝色边框div出现在底部 视口（屏幕没有向下滚动），和橙色 在它之后应该出现膛margin-top - 所以直到它才能看到 我们向下滚动页面。

    现在我想我必须使用JQuery和窗口高度来获取窗口高度 将该值的div应用于带边框的ul， （以及蓝色边界{{1}}上也是如此） - 所以我会得到 到那以后。但是，如果你能建议一个只有CSS的解决方案，请 做。

2 个答案:

答案 0 :(得分：2)

最后到达那里！

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

接下来，我们将文字内容放在第一个页面元素下，我们使用width: 90%设置一个小样式并使用margin: 10px auto;将其居中，这样我们就可以看到div周围的背景。

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

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

我们很高兴去！有任何问题请告诉我。

＆＃13;
＆＃13; 
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
  }
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：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具有全屏宽度，然后从100px显示bottom并且height也100px，最后对于.other-content 

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

这将使其显示在top

之后的100%高度的.absolute-container .blinking-title-ul
相关问题
最新问题