There is such a construction:
<div CLASS="PARENT"> <div CLASS="CHILD"></div> <div CLASS="CHILD"></div> ... <div CLASS="CHILD"></div> </div> And children with a CHILD class can be an arbitrary unknown number. How to make the children are located strictly under each other along the Z axis? Moreover, it is necessary for PARENT to accept the size of the contents (of the highest, visible block).
Perhaps this option ride:
As I understand it, you already have JS dynamic element creation. It remains to add a height comparison line, the last if:
document.getElementById('create').addEventListener('click', function(){ //При клике создали div, сделали класс CHILD let child = document.createElement('div'); child.className = "CHILD"; //Этот кусок не важен. Для случайного наполнения текстом let text = ""; let u = Math.floor( Math.random()*245 + 5 ); for(let i = 0; i < u; i++){ text += "test "; } child.innerHTML = text; //Пихаем созданный элемент в нужный div. let mama = document.getElementById('MAMA'); mama.appendChild(child); //Рассчитываем высоту созданного элемента и сравниваем с высотой общего div let H = child.clientHeight; if( mama.clientHeight < H ) { //Если оказалось меньше - меняем высоту. mama.style.height = H + 'px'; } }); #MAMA {width: 400px; border: 5px solid #123;} .CHILD {position: absolute; width: 400px; border: 1px solid red;} <button id="create">Создать</button> <div id="MAMA"></div> 
The most obvious way to build blocks along the z axis is absolute positioning (except for the first one, since it determines the size of the parent). JS for demonstration: to send the first block to the end of the list - click on it.
$('.child').click(function(){ $(this).appendTo($(this).parent()); }) .parent{ position:relative; overflow:hidden; } .child{ position:absolute; top:0; left:0; width:100%; } .child:first-child{ position:relative; z-index:99; } #child1{ background:red; height:30px; } #child2{ background:green; height:40px; } #child3{ background:blue; height:20px; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="parent"> <div class="child" id="child1"></div> <div class="child" id="child2"></div> <div class="child" id="child3"></div> </div> 
Example:
var cardDeck = $('.card-deck'); var firstCard = $('.card-deck .card').first(); $('.card-deck').css({height: firstCard.outerHeight(), width: firstCard.outerWidth()}); $('.card').each(function(index){ $(this).on("click", function(){ $(this).fadeOut(); }); }); .card-deck { margin: 0 auto; } .card { box-sizing: border-box; position: absolute; height: 240px; width: 140px; padding: 10px 14px; border-radius: 12px; box-shadow: 0 3px 6px rgba(0,0,0,0.08), 0 3px 6px rgba(0,0,0,0.13); color: white; transition: transform 0.3s ease-in-out; } .card:hover { cursor: pointer; transform: scale(1.05); } .card-red { background-color: red; } .card-blue { background-color: blue; } .card-green { background-color: green; } .card + .card { z-index: 1; // начинаем отсчет карт с конца } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="card-deck"> <div class="card card-red">Red card</div> <div class="card card-blue">Blue card</div> <div class="card card-green">Green card</div> </div> 
Source: https://ru.stackoverflow.com/questions/768493/
All Articles