部分解决方案后编辑的标题：此 div 悬停在其余内容上，并将 `height:100%` 添加到 body 解决了这个问题。为什么？
Edited title after partial solution: This div hovers over the rest of the contents, and adding `height:100%` to body solves this. Why?
我刚刚通过将 height:100%; 添加到 html 和 body、 来解决问题 但无法计算找出确切原因。所以现在我将问题从 "Why does this div appear hovering over its sibling div, rather than appearing after it?" 更改为您在标题中看到的内容。
您可以看到我对显示此解决方案的 JSFiddle 的回答，现在的问题是为什么这样可以解决问题。
在下面的 SSCCE 中，我希望 .content-other-than-slider 位于 first/top 视口下方（在该页面的布局中由 first-viewport 表示），以便它不可见直到用户向下滚动。
我一直在摆弄 positons 但做不到。所以问题是 我该怎么做？
$(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="#"><</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="#">></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 解决了问题。
但我还不清楚为什么这样可以解决问题，所以如果有人知道，我希望他们仍然 post 回答或编辑这个。
注意：我会删除这个问题，因为它已经解决了，而且还没有任何答案，但我认为这个问题可能对未来的访问者有用。
我刚刚通过将 height:100%; 添加到 html 和 body、 来解决问题 但无法计算找出确切原因。所以现在我将问题从 "Why does this div appear hovering over its sibling div, rather than appearing after it?" 更改为您在标题中看到的内容。
您可以看到我对显示此解决方案的 JSFiddle 的回答，现在的问题是为什么这样可以解决问题。
在下面的 SSCCE 中，我希望 .content-other-than-slider 位于 first/top 视口下方（在该页面的布局中由 first-viewport 表示），以便它不可见直到用户向下滚动。
我一直在摆弄 positons 但做不到。所以问题是 我该怎么做？
$(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="#"><</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="#">></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 解决了问题。
但我还不清楚为什么这样可以解决问题，所以如果有人知道，我希望他们仍然 post 回答或编辑这个。
注意：我会删除这个问题，因为它已经解决了，而且还没有任何答案，但我认为这个问题可能对未来的访问者有用。