Question

I’m working on a concept of using an image that isn’t a perfect square and using it at the top left and bottom right of the image, but I want to position it so it’s 25px off the image slider.

What is the proper way to position this to look like the mock-up?

Positioning using position:relative; and top/left: -XXpx; I think this is best way but I could be wrong

Positioning using margin-left: -XXpx; etc Don’t think this is right at all

Position using vertical-align I was unsuccessful at getting this to work

Here is a fiddle of it – Stripped Down

—

Answer 1

Yes, your first approach is the best: http://jsfiddle.net/zFa99/8/

You want to put position: relative on the container which holds the main image and the two corner images, and then position the corner-images absolutely.

#slider { position: relative; }
.tl-corner, .br-corner { position: absolute; }
.tl-corner { bottom: 0; right: 0; } /* this line is not ncessary as top:0 and left:0 are default */
.br-corner { bottom: 0; right: 0; }

There is no need to float the corner images.