如何实现多个div元素的底部重叠效果？

预期效果 #

当前效果 #

我通过数组动态生成div元素来实现堆叠卡片效果，但实际效果和预期不符，请帮我排查遗漏的点。

现有代码 #

JavaScript #

const items = [
  { picturePath: '../example.png', desc: 'Beschreibung 1', title: 'Titel 1' },
  { picturePath: '../example.png', desc: 'Beschreibung 1', title: 'Titel 2' },
  { picturePath: '../example.png', desc: 'Beschreibung 1', title: 'Titel 3' },
];

$(document).ready(function() {
  var $DivList = $('#div-list-Items');
  var zIndexCounter = 1000; // 初始z-index值

  $.each(items, function(index, item) {
    var $itemDiv = $('<div></div>').addClass('item');
    $itemDiv.css('z-index', zIndexCounter - index);

    if (index === 0) {
      $itemDiv.css('top', '50%');
    } else {
      var overlap = 10; // 元素重叠的像素量
      var previousItemTop = parseInt($DivList.children('.item').last().css('top'));
      var previousItemHeight = $DivList.children('.item').last().outerHeight();
      var newTopValue = previousItemTop + previousItemHeight - overlap;
      $itemDiv.css('top', newTopValue + 'px');
    }

    $DivList.append($itemDiv);
  });
});

CSS #

#div-list-Items {
  position: relative;
  width: 100%;
  height: 600px;
}

.item {
  position: absolute;
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
  border-radius: 8px;
  width: 80%;
  height: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: none;
}

.section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<section id="div-list" class="section center">
  <div id="div-list-Items"></div>
</section>

问题分析与解决方案 #

核心问题 #

1. 卡片高度设置错误：.item的height:100%让每个卡片高度和容器一致，加上transform: translate(-50%, -50%)垂直居中，导致所有卡片完全重叠，无法看到堆叠效果。
2. top值计算逻辑冲突：第一个卡片用百分比top:50%，后续卡片转成像素计算，但transform会改变元素的实际渲染位置，导致计算出的top值不符合预期。
3. 垂直居中方式干扰堆叠：全局的transform: translate(-50%, -50%)同时控制水平和垂直居中，破坏了手动控制top实现堆叠的逻辑。

修改后的代码 #

调整后的CSS

#div-list-Items {
  position: relative;
  width: 100%;
  height: 600px;
}

.item {
  position: absolute;
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
  border-radius: 8px;
  width: 80%;
  /* 固定卡片高度，可根据需求调整 */
  height: 200px;
  left: 50%;
  /* 仅保留水平居中 */
  transform: translateX(-50%);
  border: none;
}

.section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

调整后的JavaScript

const items = [
  { picturePath: '../example.png', desc: 'Beschreibung 1', title: 'Titel 1' },
  { picturePath: '../example.png', desc: 'Beschreibung 1', title: 'Titel 2' },
  { picturePath: '../example.png', desc: 'Beschreibung 1', title: 'Titel 3' },
];

$(document).ready(function() {
  var $DivList = $('#div-list-Items');
  var zIndexCounter = 1000;
  // 卡片高度，与CSS设置保持一致
  const cardHeight = 200;
  // 元素重叠像素量
  const overlap = 10;
  // 容器高度
  const containerHeight = $DivList.height();
  // 第一个卡片初始top，使其在容器内垂直居中
  const initialTop = (containerHeight - cardHeight) / 2;

  $.each(items, function(index, item) {
    var $itemDiv = $('<div></div>').addClass('item');
    // 索引越大z-index越小，确保先创建的卡片在上方
    $itemDiv.css('z-index', zIndexCounter - index);

    if (index === 0) {
      $itemDiv.css('top', initialTop + 'px');
    } else {
      // 获取前一个卡片的top值
      const previousTop = parseInt($DivList.children('.item').last().css('top'));
      // 计算当前卡片的top：前一个top + 卡片高度 - 重叠量
      const newTop = previousTop + cardHeight - overlap;
      $itemDiv.css('top', newTop + 'px');
    }

    $DivList.append($itemDiv);
  });
});

修改说明 #

• 固定卡片高度，避免和容器高度一致导致完全重叠；
• 移除垂直方向的transform居中，仅保留水平居中，让top值能准确控制卡片垂直位置；
• 初始化第一个卡片的top值，使其在容器内垂直居中；
• 统一用像素计算top值，确保后续卡片的堆叠偏移逻辑准确；
• 保持z-index的设置，让先创建的卡片（索引小的）在上方，符合预期的堆叠层级。

内容的提问来源于stack exchange，提问作者BeginnerWPF