我想达到这样的效果:
为了实现这一点，我用一些测试数据制作了这个array.从这个数组中，我动态地创建了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>