在彼此的顶部显示列表项

Question

我的目标是在列表项中移动，一个在另一个淡入时淡出。我需要所有这三个列表项显示在同一行，彼此重叠。应该适用于不同宽度的图像，唯一的共同属性可能是顶部位置，相对于它所在的 div。

Link

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

ul {
  list-style-type:none;
}

为了更好地解释，我需要这些项目，无论是文本、图像、不同大小的 div，都位于屏幕中间，完全居中。

这可以通过 javascript 解决方案来实现，方法是测量包含的元素的大小并从图像左侧减去中间偏移量。

我想要实现的是一个只有 CSS3/HTML5 的选项来实现类似的效果。

Answer 1

我希望我能理解您的问题：只需使用绝对的 position 属性值，它们就会相互堆叠。试试这个：

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

注意：您可以使用z-index来改变元素的堆栈顺序。