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 with images of varying widths, the only common attribute may be the top position, relative to the div it is in.

Link

.container {
  display:table;
  margin: 0 auto;
}

ul {
  list-style-type:none;
}

To explain a little better, I need these items, whether it's text, images, divs of varying sizes to be in the middle of the screen, perfectly centered.

This is achievable with a javascript solution, by measuring the size of the element contained and subtracting the middle offset from the left side of the image.

What I'd like to achieve is a CSS3/HTML5 only option to this similar effect.

回答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.

来源：https://stackoverflow.com/questions/27583114/display-list-items-on-top-of-each-other