CODEWITHSUNDEEP
htmlcss
Blake
Blake

Reputation: 84

Div not fully showing

So I have two divs, and am trying to create a parallax effect. So pretty much, when I scroll I want .collapse to be hidden behind .content. My problem here is that when I add position: fixed; to .collapse, the div is completely hidden. But when it isn't set to position: fixed;, it just acts like a div below a div, no parallax effect. Here is a 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;
}

Upvotes: 0

Views: 105

Answers (1)

Mr Lister
Mr Lister

Reputation: 46539

Your example code suffers from a number of problems, all of which contribute to the confusion, and correcting one of them will not make much of a difference. That's why each of the comments above, while all valuable, appear not to do much by themselves.

  1. The background picture to collapse, given as '../img/bg.jpg', resolves to 'http://fiddle.jshell.net/obgpkLLq/1/img/bg.jpg', which doesn't exist. As a result,collapse is white on white; invisible.
  2. The z-index in content doesn't work, because content isn't positioned.
  3. Also because content isn't positioned, it starts at the top of the screen, partially behind the nav bar and fully in front of collapse
  4. The nav bar is positioned, but it doesn't have a z-index. This will cause problems later after we've corrected the content positioning.
  5. None of the positioned sections have top properties, which will cause all of them to end up at the top of the window.

All these problems need to be solved before the page looks like you want.

In the snippet, I have simplified the nav bar somewhat, because its CSS was distracting from the main issues. Also, assuming that the nav bar needs to be in front of everything, I changed the z-indexes to 0 for collapse, 1 for content and 2 for the nav bar.

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>

Upvotes: 1

Related Questions