z-index, how does it affect performance?

Question

How does the css z-index value affect performance?

If I have multiple images on a page does it matter if I use high z-index values, like 10,000?

For example, a page contains 15 images with z-indexes ranging from 500 - 10,000, and if the images are moveable (jQuery draggable), does it impact upon performance by using high values if the page is redrawn so frequently?

Answer 1

The number of layers matters, but the actual value of the z-index does not. When rendering the page, the browser just sorts all of the absolutely-positioned elements by their z-index (ascending) and draws them in that order.

EDIT: Also, the performance hit from sorting only occurs when you change the z-index of the layers. If the z-indices aren't changing often, the performance hit probably won't be noticeable at all. Even if you are changing the z-indices a lot, sorting a list of 15 items is almost instantaneous.