Aligning complex images on a web page

What is the best way to position and align images on an HTML web page?

I will have approximately 10 user-controls that each have a set of images on them laid out in a s开发者_如何学Gopecific pattern, eg - an arc, a circle, straight line, some other sort of curve.

All the images will be the same size.

How can I achieve this using best practices?

Absolute positioning is probably the way to go for something like that. With absolute positioning, you basically just define the x/y coordinates of each one. To position an element absolutely, you set position: absolute; in the CSS, and then top: 5px; and left: 5px; (that is, 5 pixels from the top, 5 from the left; you can also use bottom and right instead). Note that though it's called "absolute" positioning, which would make you think it's relative to the whole document, it's actually only relative to the first ancestor element with positioning other than static (static is the normal positioning mode). So if you wanted to contain a bunch in a parent and position it normally, you would set it to position: relative;, or you could position it absolutely as well. If no parent has non-static positioning, it will be relative to the whole page. Another thing to note, is that absolutely positioned elements don't take up any space, so for instance, if you've got a big element absolutely positioned, and the window is too small, there won't be scroll bars.