li元素堆叠并且不对齐

要实现li元素堆叠并且不对齐的效果，可以使用CSS的position属性和z-index属性来控制元素的堆叠顺序和位置。以下是一个示例代码：

HTML代码：

<ul class="stacked-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

CSS代码：

.stacked-list {
  position: relative;
  list-style: none;
  padding: 0;
}

.stacked-list li {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  background-color: #ccc;
  padding: 10px;
  margin-bottom: 10px;
}

.stacked-list li:nth-child(2) {
  z-index: 1;
  background-color: #ff0000;
}

.stacked-list li:nth-child(3) {
  z-index: 2;
  background-color: #00ff00;
}

在上面的示例中，我们使用了position: absolute来使li元素脱离正常的文档流，并使用z-index来控制元素的堆叠顺序。通过设置不同的z-index值，可以控制元素的堆叠顺序。同时，通过调整top和left属性，可以控制元素的位置。

在这个示例中，第一个li元素具有默认的z-index值0，第二个li元素具有较高的z-index值1，第三个li元素具有最高的z-index值2。这样，第三个li元素会堆叠在第二个li元素上面，第二个li元素会堆叠在第一个li元素上面。

通过调整z-index和其他样式属性，可以实现不同的堆叠效果和对齐方式。