将平面列表项目彼此重叠呈现(重叠)

<style>
  .list-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background-color: #f00;
  }
  
  .item-1 {
    z-index: 1;
  }
  
  .item-2 {
    z-index: 2;
    left: 50px;
    top: 50px;
    background-color: #0f0;
  }
  
  .item-3 {
    z-index: 3;
    left: 100px;
    top: 100px;
    background-color: #00f;
  }
</style>

<div class="list-item item-1"></div>
<div class="list-item item-2"></div>
<div class="list-item item-3"></div>

<style>
  .list-item {
    width: 100px;
    height: 100px;
    background-color: #f00;
    transform: translateX(0);
    transition: transform 0.3s ease;
  }
  
  .list-item:hover {
    transform: translateX(50px);
  }
</style>

<div class="list-item"></div>