Layering Images

The code about to be described can make pixel perfect content placement possible.

Say you have two images, like the two images below:

But, you want them to be on top of each other to form a cross like the one below:

How did I do that? Magic, you say? Nope, all I did was add a couple of <div> tags. Here is the code:

First, you must give your div a name, which the id attribute does. The style attribute will define the position of the whole layer of content the falls inside the <div> tag. There are only a few things that you have to remember:

• The left function positions the image x number of pixels from the left of the browser to the left side of the image.
• The top function positions the image x number of pixels from the top of the browser to the top of the image.
• Remember to put position: absolute in because if you do not, the position will default to the position: relative setting which is more difficult to work with and can cause some varying placements in different browsers.

That's all you need to know. Layer it up!