html - 在部分解决方案 : This div hovers over the rest of the contents, 之后编辑标题并将 `height:100%` 添加到正文解决了这个问题。为什么？

标签 html css position css-position

我刚刚通过添加 height:100%; 解决了这个问题至 html和 body , 却想不通具体原因。所以现在我正在改变问题“为什么这个 div 出现在它的兄弟 div 之上，而不是出现在它之后？”您在标题中看到的内容。

您可以看到我对显示此解决方案的 JSFiddle 的回答，现在的问题是为什么这样可以解决问题。

JSFiddle here.

在下面的 SSCCE 中，我想要 .content-other-than-slider位于第一个/顶部视口(viewport)下方(在此页面的布局中由 first-viewport 表示)，因此在用户向下滚动之前它是不可见的。

我一直在摆弄positon s 但不能那样做。所以问题是我该怎么做？

enter image description here 

$(document).ready(function() {
  //alert("Meh! Meh!");//check

  var numberOfImages = $('#imageSlideshowContainer > img').length;
  var currentImage = 1;

  /**
   * Previous Arrow Code
   **/
  $('.previous-slide-arrow').click(function() {
    $('img.slider-image' + currentImage).hide();
    $('span.caption' + currentImage).hide();
    $('a.navigation-bullet' + currentImage).removeClass('active');

    currentImage--;

    if (currentImage == 0) {
      currentImage = numberOfImages;
    }

    $('img.slider-image' + currentImage).show();
    $('span.caption' + currentImage).show();
    $('a.navigation-bullet' + currentImage).addClass('active');

    return false;
  });


  /**
   * Next Arrow Code
   **/
  $('.next-slide-arrow').click(function() {
    $('img.slider-image' + currentImage).hide();
    $('span.caption' + currentImage).hide();
    $('a.navigation-bullet' + currentImage).removeClass('active');

    currentImage++;

    if (currentImage == numberOfImages + 1) {
      currentImage = 1;
    }

    $('img.slider-image' + currentImage).show();
    $('span.caption' + currentImage).show();
    $('a.navigation-bullet' + currentImage).addClass('active');

    return false;
  });

  /**
   * Bullets Code
   **/
  function changeImage(imageNumber) {
    $('img.slider-image' + currentImage).hide();
    $('span.caption' + currentImage).hide();
    currentImage = imageNumber;
    $('img.slider-image' + currentImage).show();
    $('span.caption' + currentImage).show();

    $('.navigation-bullets-wrapper a').removeClass('active');

    $('a.navigation-bullet' + imageNumber).addClass('active');
  }


  /**
   * Automatic Timer to change Slides
   * Copy paste the same code from next arrow, and insert a special function setInterval which will run another function every x seconds you set.
   **/
  function autoChangeSlides() {
    $('img.slider-image' + currentImage).hide();
    $('span.caption' + currentImage).hide();
    $('a.navigation-bullet' + currentImage).removeClass('active');

    currentImage++;

    if (currentImage == numberOfImages + 1) {
      currentImage = 1;
    }

    $('img.slider-image' + currentImage).show();
    $('span.caption' + currentImage).show();
    $('a.navigation-bullet' + currentImage).addClass('active');
  }

  var slideTimer = setInterval(function() {
    autoChangeSlides()
  }, 1000);

});
.first-page {
  height: 100%;
}
.image-slideshow-container {
  position: fixed;
  z-index: -1;
}
.image-slideshow-container img {
  position: fixed;
  display: none;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
img.slider-image1 {
  display: block;
}
.first-viewport {
  height: 100%;
  width: 100%;
  position: absolute;
  display: table;
}
a.previous-slide-arrow,
a.next-slide-arrow {
  display: table-cell;
  vertical-align: middle;
  position: relative;
  color: transparent;
  opacity: 0.7;
  text-align: left;
  background-repeat: no-repeat;
  background-position: center;
  left: 20px;
  width: 3%;
}
a.next-slide-arrow {
  left: auto;
  right: 20px;
  text-align: right;
}
.previous-slide-arrow:hover,
.next-slide-arrow:hover {
  opacity: 1;
  color: transparent;
}
.central-content-container {
  text-align: center;
  display: table-cell;
  vertical-align: bottom;
  position: relative;
  bottom: 30px;
  padding: 20px 5px;
}
.central-content-container span {
  display: none;
}
.central-content-container a {
  width: 6px;
  height: 6px;
  display: inline-block;
  margin-right: 15px;
  background: #b9b8b8;
  border-radius: 100%;
}
.central-content-container a:hover {
  background: #e8e3e3;
}
.central-content-container a.active {
  background: white;
}
/*....................................................*/

a.learn-more-link {
  background-color: rgba(250, 250, 250, 0.95);
  text-size: 30px;
  padding: 7px 15px;
  color: transparent;
  text-align: center;
}
.learn-more-link-wrapper {
  margin-top: 15px;
}
.learn-more-link-wrapper .learn-more-image {
  text-align: center;
  padding: 5px 40px;
  border-radius: 15%;
  opacity: 0.8;
}
.learn-more-link-wrapper .learn-more-image:hover {
  opacity: 1;
}
.slider-text-wrapper {} .slider-text-wrapper span {
  display: none;
}
.slider-text-wrapper span h3,
.slider-text-wrapper span p {
  font-family: 'Open Sans', sans-serif;
  color: white;
  line-height: 60px
}
.slider-text-wrapper span h3 {
  font-weight: 100;
  text-transform: uppercase;
  font-size: 68px;
}
.slider-text-wrapper span h3 strong {
  font-weight: 700;
}
.slider-text-wrapper span p {
  font-weight: 100;
  font-size: 20px;
}
.slider-text-wrapper .caption1 {
  display: block;
}
.first-viewport {
  top: 0px;
}
.caption {
  font-family: sans-serif;
  font-size: 25px;
  font-weight: bold;
  color: white;
}
.content-other-than-slider p {
  width: 90%;
  opacity: 0.5;
  background-color: wheat;
  margin: 0px auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="first-page">

  <div id="imageSlideshowContainer" class="image-slideshow-container">

    <img class="slider-image1" src="http://shutupandtakemethere.com/pics/022014/stairs-in-a-japanese-garden-big.jpg" alt="pitcher!" />

    <img class="slider-image2" src="http://piximus.net/media/9366/beautiful-places-on-the-world-20.jpg" alt="pitcher!" />

    <img class="slider-image3" src="http://freetopwallpaper.com/wp-content/uploads/2013/09/free-beautiful-place-wallpaper-hd-161.jpg" alt="pitcher!" />

    <img class="slider-image4" src="http://www.countrysideshow.co.uk/sites/default/files/imagecache/HP_SS1_990x514/rotor/hh%20ss%201.jpg"
    alt="pitcher!" />

  </div>




  <div class="first-viewport">

    <a class="previous-slide-arrow" href="#">&lt;</a>


    <div class="central-content-container">
      <div class="slider-text-wrapper">
        <span class="caption caption1">DESCRIPTION TEXT</span>
        <span class="caption caption2">DESCRIPTION TEXT</span>
        <span class="caption caption3">DESCRIPTION TEXT</span>
        <span class="caption caption4">DESCRIPTION TEXT</span>
      </div>

      <div class="learn-more-link-wrapper">
        <img class="read-more-image" src="http://www.abacusinstitute.ac.nz/wp-content/uploads/2013/05/readmore.png" />
      </div>

      <div class="navigation-bullets-wrapper">
        <a class="active navigation-bullet1" href="javascript: changeImage(1)">
          <span>Bullet</span>
        </a>
        <a class="navigation-bullet2" href="javascript: changeImage(2)">
          <span>Bullet</span>
        </a>
        <a class="navigation-bullet3" href="javascript: changeImage(3)">
          <span>Bullet</span>
        </a>
        <a class="navigation-bullet4" href="javascript: changeImage(4)">
          <span>Bullet</span>
        </a>
      </div>
      <!-- navigation bullets wrapper -->
    </div>
    <!-- central-content-container -->

    <a class="next-slide-arrow" href="#">&gt;</a>
  </div>
  <!-- first-viewport -->

</div>
<!-- first-page -->

<div class="content-other-than-slider">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<!-- content-other-than-slider -->

最佳答案

将 height:100%; 应用于 body 解决了这个问题。

JSFiddle .

但我还不清楚为什么这样可以解决问题，所以如果有人知道，我希望他们仍然发布答案或编辑这个。

注意:我会删除这个问题，因为它已经解决了，而且还没有任何答案，但我认为这个问题可能对 future 的访问者有用。

关于html - 在部分解决方案 : This div hovers over the rest of the contents, 之后编辑标题并将 `height:100%` 添加到正文解决了这个问题。为什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31066568/

上一篇：jsf - 如何在 Facelets 模板中引用 CSS/JS/图片资源？

下一篇：jquery - 如何在不更改效果的情况下在可滚动导航中添加下拉菜单？

相关文章：

html - 圆 Angular overflow hidden + 转换(在 Firefox 和 Safari 中正常，在 Chrome 和 Opera 中无效)

css - 带有页眉和页脚的 100% Css 布局

html - IE6 和 IE7 的输入值文本换行

image - 使用 iText 将图像放置在 pdf 的左下角

position - 如何以全文本宽度居中 LaTeX xtable 输出

jquery改变:before pseudoelement的css绝对位置

html - 更简单的跨浏览器 CSS3 特性

javascript - 您可以使用 JavaScript 将 CSS 背景图像变成提交按钮吗？

javascript - 即使我在 POST 上收到 200 响应，$_POST 数据还是空的？

html - 在 WebStorm 7 的单独 CSS 文件中自动完成 ID？

©2024 IT工具网  联系我们