How can I overlap multiple divs on the bottom?

Issue

I want to achieve this type of effect:

To acheive this I made this array with some test data. From this array I create the divs dynamically which have the amount of the items from this array.

What I get is not what. What am I missing? This is what I get:

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>

Solution

To do what you require you can use the index of the item to add some margin-top to each successive .item div.

In the working example below, note the use of the 'index' argument of map() to incrementally adjust the z-index and margin-top of the elements created in the loop.

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' }
];
const $container = $('#div-list-items');

jQuery($ => {
  const $items = items.map((item, i) => `<div class="item" style="z-index: ${1000 - i}; margin-top: ${50 * i}px;"></div>`);
  $container.append($items);
});

#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;
  background-color: #FFF;
}

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

Answered By - Rory McCrossan