Question

我的目标是在列表项目之间移动，随着另一个项目逐渐消失而逐渐淡出。我需要将这三个列表项目显示在同一行上，彼此叠加。应该使用不同宽度的图像，唯一的共同属性可能是相对于它所在的div的顶部位置。

.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 来更改元素堆栈的顺序。

将列表项显示在彼此之上

1 个答案: