HTML Tutorials: 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:
<div id="top" style="left: 500px;
top: 485px; position: absolute">
<img src="image1.gif"> </div>
<div id="under" style="left: 500px;
top: 485px; position: absolute">
<img src="image2.gif"> </div>
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!
|
