при выполнении цикла каждый новый блок должен смешаться в право и на верх на 10%. Для этого ,как мне кажется, нужно создать переменную по типу:
let amount_step = 10 (колличество процентов которое занимает 1 блок)
next_step.style.left="amount_step+10%" (при каждой итерации сдвигается на 10%)
next_step.style.bottom="amount_step+10%" (при каждой итерации сдвигается на 10%)
let body = document.querySelector(".task_body")
let first_step = document.createElement("div")
body.append(first_step);
first_step.style.width="10%"
first_step.style.height="10%"
first_step.style.backgroundColor="red"
first_step.style.position= "absolute"
first_step.style.left="2%"
first_step.style.bottom="2%"
for(let i =0; i<=10; i++){
let next_step = document.createElement("div")
body.append(next_step);
next_step.style.width="10%"
next_step.style.height="10%"
next_step.style.backgroundColor="green"
next_step.style.position= "absolute"
next_step.style.left="2%"
next_step.style.bottom="2%"
}
<body>
<div class="task_body">
<button >start</button>
</div>
</body>
html, body {height: 100% }
body{
background-color: rosybrown;
display: flex;
justify-content: center;
align-items: center;
}
.task_body{
width: 450px;
height: 500px;
background-color: rgb(244, 210, 239);
box-shadow: 0 0 30px rgb(46, 1, 39);
position: absolute;
}
Предусмотрено ли что-то такое или похожее в css/js. Пока любая попытка применить переменную не работает
Или просто что типа -
next_step.style.bottom="+12%" 
