我想达到这样的效果：

的数据
为了实现这一点，我用一些测试数据制作了这个数组。从这个数组中，我动态地创建了div，其中包含了这个数组中的项目数量。
我得到的不是什么。我错过了什么？这是我得到的：

的

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; // Startwert für den 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; // Die Pixelanzahl, um die jedes Element überlappen soll
      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);
  });
});

#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;
}

<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>