Display List Items On Top Of Each Other

I'm aiming to move through list items, fading one out as the other fades in. I need all three of these list items to display on the same line, on top of each other. Should work wi

Solution 1:

I hope I understand your question: Simply using position property value of absolute, will stack them on each other. Try this:

* {
  margin: 0 auto;
  }

.container {
  width: 300px;
  position: relative;
  margin-top: 70px;
  }


ul {
  list-style-type:none;
}

ul li {
    position: absolute;
    height: 25px;
    background-color: red;
    color: white;
    padding: 10px;
    display: block;
    text-align: center;
    width: 100%;
}

<div class="container">
      <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
      </ul>
    </div>

Note: You can use z-index to alter the order of the stack of the element.