j0hnik,
Я так понимаю тут соль задачи не использовать зет-индексы, т.е наложение слоев друг на друга. А вместить все фигуры в пространство матаном...
рони,
Начнем с двух
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#slider{
font-size: 22px;
height: 500px;
width: 700px;
border: 1px solid rgb(0, 0, 255);
position: relative;
color: rgb(255, 255, 255);
text-align: center;
}
#slider div{
box-sizing: border-box;
border: 1px solid rgb(255, 255, 0)
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
function rgb() {
var r = parseInt(Math.random() * 255);
var g = parseInt(Math.random() * 255);
var b = parseInt(Math.random() * 255);
return "rgb(" + r + ", " + g + ", " + b + ")";
}
function rand(c) {
return Math.random()*c|0+1;
}
var a = [700, 500];
var t = [];
var h = [];
var hs = 0;
var ws = 0;
for (var i=0; i<2; i++) { t[i] = rand(10); }
function value(x, xs) {
do {
for (var z = 0; z < t.length; z++) { x[z] = rand(700); }
xs = x.reduce(function(a,b){ return a + b; });
} while(xs != a[1]);
return x;
}
h = value(h, hs);
function rects(h) {
var s = document.getElementById('slider');
for (var k = 0; k < t.length; k++) {
var rect = document.createElement('div');
rect.style.width = '100%';
rect.style.height = h[k]+'px';
rect.style.lineHeight = h[k]+'px';
rect.style.backgroundColor = rgb();
rect.textContent = t[k];
s.appendChild(rect);
}
}
rects(h);
document.getElementsByTagName('p')[0].textContent = t;
});
</script>
</head>
<body>
<div id="slider"></div>
<p></p>
</body>
</html>