Question

I have a list of images, which I’d like to stack, one on top of each other, then offset each image by 30px top and left.

<ul>
   <li><img src="#"></li>
   <li><img src="#"></li>
   <li><img src="#"></li>
   <li><img src="#"></li>
   <li><img src="#"></li>
</ul>

I found a jsFiddle of a similar effect (http://jsfiddle.net/BrAbs/1/) but require the left position to be offset and increase for each image too (0px, 30px, 60px, 90px) etc.

Answer 1

Using jQuery:

$('li').each(function (i) {
    $(this).css({
        left: 30 * i
    });
});

Fiddle

Requires position:relative on the elements which you’re setting the left CSS property to.

---

As requested, you can also use absolutely positioning relative to an relatively positioned ancestor if you need the stack effect without setting height on the lis:

.ulClass {
    position: relative; /*resets the absolute positioning of descendant li(s)*/
}
.ulClass li {
    position: absolute; /*absolute positioning relatively to ancestor .ulClass*/
}

Then the updated JS adding a top offset:

$('li').each(function (i) {
    $(this).css({
        top: 30 * i,
        left: 30 * i
    });
});

Fiddle