Why is this <div> hovering over everything else, and how to solve this?

Question

JSFiddle here!

There is a div .background-image-div (containing a span holding a full screen background image) with position:fixed, so it does not scroll with the page content.

The rest of the page content appears hovering/stacked on the top of the background image. The picture I attached show the problems and the positions I applied to different elements of HTML.

SOME EXPLANATION ON PROBLEMS:

The problems/my questions can be divided into two categories:

1. The ul containing the animating text, and the rest of the content (the orange bordered div in the picture) should be in the flow.

   By "in the flow", I mean they should appear where they are coded in the markup, that is the orange bordered div after the blue bordered ul. But what is happening is that the blue bordered ul is "out of flow" - it does not appear where it was written in the markup, but is hovering over everything else.

2. I want the blue bordered ul to appear at the bottom of the viewport (the screen without scrolling down at all), and the orange boredered div should appear after it - so it is not visible until we scroll down on the page.

   Now i think I will have to get the window height using JQuery and apply a margin-top of that value to the orange bordered div, (and something like that on blue bordered ul as well)- so i'll get to that later. But if you can suggest a CSS only solution, please do.

Answer 1

Got there in the end!

So we did a little rewrite of your layout. To make it a little easier we can create a div that is acting as a page for us taking up height: 100%;. In this we can position: absolute; the ul element at the bottom.

Next we put the text content under the first page element, with a little styling we put a width: 90% and center it using margin: 10px auto; this lets us see the background around the div.

For the background we can place this on the body and get it to resize using the whole page with this little bit of code.

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

And we are good to go! Any questions just let me know.

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
  }
}

<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>

Answer 2

You can create another container for all the content except the image, and put all the content inside it, like in this Updated JSFiddle, first the 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>

with this HTML, you're separating the background in the .fixed-container so it wont scroll down, and all the content in the .absolute-container, what you need now is to style the .absolute-container with this style

.absolute-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

which will make the container the same size as the screen size. Then for the .blinking-title-ul

.blinking-title-ul {
    position: absolute;
    left: 0;
    right: 0;
    height: 100px;
    bottom: 100px;
}

which will make the ul have a full screen width, then appear 100px from the bottom and have the height of 100px too, then lastly for the .other-content

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

which will make it appear from the top for 100% of the .absolute-container height which is right after the .blinking-title-ul