Css 如何创建一组相互偏移和重叠的图像？

我正试图显示一堆卡片，我希望每个卡片的顶部都能显示出来，并允许用户将鼠标悬停在卡片上以显示它。我有下面的CSS，但是对于我想要显示的任何数量的卡片，我必须复制我的第n个子部分。我目前没有使用LESS或Style，但如果其中一个可以做到这一点，它们就是选项。要明确的是，我正在寻找一个解决方案，任何数量的卡工程

.card_container > {
  position:relative;
  border:1px solid red;
}

.card_container > .card {
  position: absolute;
}

.card_container > .card:nth-child(1) {
  z-index:1;
  top:0px; 
}
.card_container > .card:nth-child(2) {
  z-index:2;
  top:35px; 
}
.card_container > .card:nth-child(3) {
  z-index:3;
  top:70px; 
}
.card_container > .card:hover {
  z-index: 9999;
}

我尝试使用javascript来分配样式，但是直接分配给.card的样式会出现在.card:hover上

  $('.card').each(function(index, el) {
    var $el = $(el);
    $el.css('z-index', index);
    $el.css('top', (35*index)+'px');
  });

小提琴可能会给你一个方向。基本上，你把ul嵌套在彼此的内部，给每个ul一个相对于其父计算的位置：

HTML:

小提琴可能会给你一个方向。基本上，你把ul嵌套在彼此的内部，给每个ul一个相对于其父计算的位置：

HTML:

---

操作容器而不是卡片。不太直观，但非常简单

.card_container li {
  height: 35px; 
  z-index: 0;   
  position: relative;    
}

.card{
  border: 1px solid black;
  width: 100px;
  height: 200px;  
  position: absolute;
}

.card_container li:hover {
  z-index: 9999;
}

---

​由于z索引，悬停的卡将在其他卡的顶部显示为溢出内容。

在容器而不是卡上操作。不太直观，但非常简单

.card_container li {
  height: 35px; 
  z-index: 0;   
  position: relative;    
}

.card{
  border: 1px solid black;
  width: 100px;
  height: 200px;  
  position: absolute;
}

.card_container li:hover {
  z-index: 9999;
}

---

​由于z索引，悬停的卡将在其他卡的顶部显示为溢出内容。

谢谢。我创建了一个小提琴测试/演示你的答案：谢谢。我创建了一个小提琴测试/演示您的答案：

.card_container li {
  height: 35px; 
  z-index: 0;   
  position: relative;    
}

.card{
  border: 1px solid black;
  width: 100px;
  height: 200px;  
  position: absolute;
}

.card_container li:hover {
  z-index: 9999;
}