z-index example

by alessandro_pezzato

HTML

<div class="foo">0</div>
<div class="foo">1</div>
<div class="foo">2</div>
<div class="foo">3</div>
<div class="foo">4</div>

CSS

* {
    font-family: sans-serif;
}
.foo {
    width: 56px;
    height: 56px;
    background: #9999ff;
    color: #ffffff;
    font-weight: bold;
    font-size: 32px;
    text-align: center;
    line-height: 56px;
    border: 8px solid rgba(128, 128, 256, 0.5);
    border-radius: 8px;
    background-clip: padding-box;
    position: absolute;
}

JavaScript

$('.foo').each(function(index) {
    $(this).css({
        left: (32 * index) + 'px',
        top: (32 * index) + 'px'
    });
});

$('.foo')[0].style.zIndex = 10;
$('.foo')[1].style.zIndex = 20;
$('.foo')[2].style.zIndex = 30;
$('.foo')[3].style.zIndex = 21;
$('.foo')[4].style.zIndex = 11;