How to change the z-index of the display:inline-block element?

Question

I'm trying to mimic the coverflow UI here: jsFiddle

As you can see on the right, the last image is covering the second last image. How do i circumvent this problem, or is there a better method other than display:inline-block. I'm trying to avoid using position:absolute as this involve calculating the position for every single image.

Answer 1

See: http://jsfiddle.net/qqWMb/1/

li:nth-last-child(2) {
    position: relative;
    z-index: 1
}

http://reference.sitepoint.com/css/pseudoclass-nthlastchild