html - Div 没有完全显示

Question

所以我有两个 div，并试图创建视差效果。非常多，当我滚动时，我希望 .collapse 隐藏在 .content 后面。我的问题是，当我将 position: fixed; 添加到 .collapse 时，div 被完全隐藏了。但是当它没有设置为 position: fixed; 时，它就像一个 div 下面的 div，没有视差效果。这是一个 JSFiddle .

HTML

    <!-- Collapse -->
    <div class="collapse">
            <h1 style="position: relative; top: 50%; transform: translateY(-50%);">
                Lorem ipsum dolor sit amet.
            </h1>
    </div>

    <!-- Content -->
    <div class="content">
        <div class="container">
            <p>Lorem ipsum dolor sit amet, …</p>
        </div>
    </div>

CSS

* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}

.collapse {
  background-image: url('../img/bg.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  height: 400px;
  position: fixed;
  left: 0;
  right: 0;
  z-index: -9999;
  text-align: center;
}

.collapse h1 {
  color: #fff;
  font-family: 'Shift', sans-serif;
  font-size: 72px;
}

.content {
  background-color: #fff;
  z-index: 9999;
}

.content h1 {
  color: #5a5a5a;
  font-size: 24px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.container {
  width: 940px;
}

.container {
  margin-right: auto;
  margin-left: auto;
  *zoom: 1;
}

.container:before,
.container:after {
  display: table;
  line-height: 0;
  content: "";
}

.container:after {
  clear: both;
}

Answer 1

您的示例代码存在许多问题，所有这些问题都会造成困惑，纠正其中一个问题不会有太大的不同。这就是为什么上面的每条评论虽然都很有值(value)，但它们本身似乎并没有做太多事情。

1. collapse 的背景图片，给出为 '../img/bg.jpg'，解析为 'http://fiddle.jshell.net/obgpkLLq/1/img/bg。 jpg'，它不存在。结果，collapse 是白色的；不可见。
2. content 中的 z-index 不起作用，因为 content 未定位。
3. 另外，因为 content 没有定位，它从屏幕顶部开始，部分在导航栏后面，完全在 collapse
前面
4. 导航栏已定位，但它没有 z-index。这将在我们更正 content 定位后导致问题。
5. 所有定位的部分都没有 top 属性，这将导致它们全部结束在窗口的顶部。

所有这些问题都需要在页面看起来像您想要的之前解决。

在代码片段中，我稍微简化了导航栏，因为它的 CSS 分散了主要问题的注意力。此外，假设导航栏需要位于所有内容的前面，我将 collapse 的 z-index 更改为 0，content 为 1，导航栏为 2。

body,
h1,
p {
  margin: 0
}
.nav {
  margin-bottom: 20px;
  margin-left: 0;
  background-color: #fff;
  height: 60px;
  width: 100%;
  position: fixed;
  box-shadow: 0px 5px 5px #888888;
  border-top: 1px solid #ccccff;
  z-index:2; /* added */
}
.collapse {
  background-image: url('http://lorempixel.com/940/400'); /* changed; needs to change back! */
  background-size: cover;
  background-repeat: no-repeat;
  height: 400px;
  position: fixed;
  top: 60px; /* added */
  left: 0;
  right: 0;
  z-index: 0; /* changed */
  text-align: center;
}
.collapse h1 {
  color: #fff;
  font-family: 'Shift', sans-serif;
  font-size: 72px;
}
.content {
  background-color: #fff;
  position: relative; /* added */
  top: 460px; /* added */
  z-index: 1; /* changed */
}
.content h1 {
  color: #5a5a5a;
  font-size: 24px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.container {
  width: 940px;
}
.container {
  margin-right: auto;
  margin-left: auto;
  *zoom: 1;
}
.container:before,
.container:after {
  display: table;
  line-height: 0;
  content: "";
}
.container:after {
  clear: both;
}

<!-- Navigation -->
<div class="nav">
  This is the nav bar
</div>

<!-- Collapse -->
<div class="collapse">
  <h1 style="position: relative; top: 50%; transform: translateY(-50%);">Lorem ipsum dolor sit amet.</h1>
</div>

<!-- Content -->
<div class="content">
  <div class="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nibh lorem, tempor ut vestibulum in, varius id neque. Etiam nisl eros, posuere ac odio at, porta tincidunt ligula. Curabitur id auctor libero. Cras lacinia est ut laoreet egestas. Mauris
      volutpat lectus in pellentesque facilisis. Sed lobortis enim eu elit aliquam pellentesque. Mauris ultrices, felis ut dapibus imperdiet, sem sem lobortis arcu, at rhoncus massa mauris a est. Aliquam erat volutpat. Nam ac lorem odio. Pellentesque
      sodales, erat nec dictum fermentum, purus turpis sollicitudin arcu, ac imperdiet urna nunc ultrices diam. Nulla imperdiet leo nulla, a iaculis neque blandit venenatis. Morbi ipsum urna, finibus vitae ultrices ut, venenatis in arcu. Nullam et arcu
      efficitur, viverra orci id, malesuada elit. Sed purus nisi, mollis at maximus et, mollis ut arcu. Donec id porta ipsum, vel tincidunt odio. In nec egestas ligula, at maximus eros. Ut consectetur consectetur velit, non maximus quam blandit ac. Cras
      id vulputate arcu. Donec suscipit luctus est, faucibus iaculis ligula convallis id. Pellentesque nisl quam, interdum et blandit vel, ultrices et metus. Morbi cursus, odio non tempor vehicula, quam justo rhoncus purus, at interdum nisl justo at ante.
      Aliquam cursus sit amet diam non maximus. Morbi dolor lorem, fermentum eget suscipit ac, pellentesque ut quam. Cras sit amet mi sagittis, ultricies lectus id, condimentum eros. Etiam mattis ligula nunc, vitae pulvinar urna molestie et. Nulla ex
      lorem, viverra sed interdum id, dictum in dui. Nulla pellentesque fermentum urna eget aliquet. Morbi at condimentum augue, id lacinia dui. Etiam non lacus lorem. Duis sit amet nunc iaculis, feugiat lorem in, ultricies orci. Donec ornare quam sed
      faucibus vehicula. Integer in felis ac orci congue facilisis quis et urna. Etiam sed tempus mi, eget congue quam. Nullam sodales pellentesque orci ut varius. In semper, erat non tincidunt feugiat, mauris massa hendrerit purus, eget pharetra diam
      dolor sit amet purus. Sed id sapien ut nulla luctus maximus a ac lacus. In hac habitasse platea dictumst. Sed fringilla orci sapien, et facilisis velit vulputate in. Cras blandit id lectus eget vehicula. Pellentesque habitant morbi tristique senectus
      et netus et malesuada fames ac turpis egestas. Praesent egestas elit ac tempus lacinia. Cras efficitur facilisis tortor ut commodo. In porttitor mollis pellentesque. Mauris et tempus turpis. Etiam tincidunt diam eget ornare suscipit. Duis condimentum
      velit sollicitudin massa interdum tristique. Cras risus libero, blandit ac ultricies sed, scelerisque sed massa. Nulla eu lobortis tellus. Suspendisse lorem nulla, blandit non pretium maximus, tempus ut urna. Nunc magna augue, iaculis at libero
      eu, pellentesque vulputate est. Maecenas facilisis libero in odio fringilla, nec placerat erat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ut turpis venenatis, dapibus ligula ac, ornare lacus.
      Etiam gravida orci eu tortor gravida, sit amet gravida eros tincidunt. Duis a turpis in ex faucibus sodales at sit amet tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed blandit tellus tellus,
      nec ornare ipsum ornare non. Maecenas sed dictum quam. Nunc tellus eros, feugiat quis porttitor nec, rutrum eu nisl. Aenean vel blandit neque. Nullam congue justo risus, malesuada congue sem ultricies a. Phasellus dictum magna eget est commodo,
      a tincidunt erat mollis. Mauris luctus ante vel hendrerit porttitor. Donec egestas, felis quis sodales hendrerit, eros mauris cursus diam, eleifend bibendum justo neque sed lectus. Fusce feugiat eget ligula at elementum. Vestibulum tempus ipsum
      ipsum, et dignissim augue commodo vitae. Nam at dolor in elit dignissim semper at fringilla elit. In congue, nunc ut malesuada bibendum, nunc urna varius nunc, vel sollicitudin purus turpis at ligula. Nullam sed ultricies nunc, eu ornare augue.
      Nulla sit amet arcu et lorem tristique tincidunt vitae a urna. Praesent nec eros mollis diam vestibulum cursus faucibus eu velit. Phasellus at justo eget diam rutrum porttitor at ut nibh. Fusce tempor nisi ac dapibus congue. Mauris luctus, urna
      eget gravida varius, quam eros pellentesque elit, et eleifend ligula elit quis elit. Fusce sed lacus sed justo vulputate tempus. Praesent auctor ornare neque, eget vehicula nisl vehicula in. Nunc urna purus, placerat eu ipsum at, bibendum consequat
      ante. Curabitur in pharetra tellus. Sed ac vehicula lectus. Curabitur feugiat massa nec erat viverra rhoncus vitae quis libero. Donec sed purus porttitor orci maximus semper laoreet vel mauris. Duis malesuada scelerisque enim sed facilisis. Mauris
      laoreet, urna sit amet pulvinar euismod, massa est commodo nulla, vel volutpat risus enim vitae leo. Donec viverra iaculis odio et tincidunt. Integer eleifend fermentum cursus. Praesent diam velit, aliquam sit amet mauris pretium, dictum scelerisque
      felis. Donec fermentum porta libero nec vehicula. Ut vitae porta quam. Aliquam erat volutpat. Nullam a felis nec libero egestas consectetur. Pellentesque sit amet eros vel libero iaculis tempor vel a ex. Morbi eu dolor nec nunc laoreet hendrerit
      in vitae ante. Nulla facilisi. Nam condimentum massa sit amet tortor pulvinar venenatis. Morbi gravida quam in turpis convallis, at egestas metus efficitur. Integer porta lectus eu vulputate dictum. Nunc mollis leo aliquam tortor cursus lobortis.
      Ut finibus nisl nec feugiat molestie. Mauris urna massa, commodo ut risus id, interdum pellentesque mauris. Sed vulputate maximus varius. Nulla facilisi. Morbi ultricies elit magna, nec egestas nulla egestas id.</p>
  </div>
</div>