Overlaying Objects on the Web Page

Many people avoid using stylesheet codes to position the various objects on their web page because they don't understand just how easy that it is to do it with Stylesheets compared to how complicated it can become if you try to use tables (which are not intended for laying out web pages).

One particular positioning task that is extremely easy to do with stylesheets that is completely impossible to achieve with tables is where you want to place two pieces of content onto the page where one appears on top of the other. As an example of this consider the scroll just below on this page and the text that appears on the scroll.

This is the content for the scroll. This text is in front of the image and not part of it.

In this example we have an image and some text but the way that we are going to code it will work regardless of what the content of the various objects are. We could have several images that all need to be overlaid on top of one another and this approach will work just as well. Note that we are not placing the image in the background using this approach and so if we were to have a background image on our page then that image would appear behing the scroll just the same as it would if the scroll were the only forground object in that spot on the page.

Another thing to note with my example is that the text doesn't start at the same top left position on the page as the scroll image since that would result in the text appearing outside of the scroll. Instead I have offset the text downward and to the right in order that it will appear to be actually written on the scroll. Also the entire combination of overlaid objects is not fixed in a set position on the web page. If the document reflows to fit a wider or narrower browser window the whole thing can be repositioned within that flow as necessary while still keeping the layers positioned correctly relative to one another.

Your particular circumstances may involve more than the two layers that make up my example and you may or may not need to offset the laysers when placing them over one another but that will only require minor changes to the stylesheet commands when using this approach.

So let's start now on looking at how we can achieve this effect. It is quite simple really. All that we have to do is to define each of our layers within a separate div that are placed one after the other in the HTML and then put both (or all) of those divs within another div. The rest of the effect from there is achieved entirely with stylesheet commands.

<div id="outer">
<div id="layer1">
Content of the backlayer
</div>
<div id="layer2">
Content of the front layer
</div>
<div>

All that remains is to add the stylesheet commands that will put the inner div contents one on top of the other offset as needed. To do this we define the outer div as position:relative and each of our layer divs as position:absolute. We then add top and left positioning to the absolute positioned divs that will position each of our divs relative to the top left corner of the outer div that contains them. By defining the outer div with relative positioning we change the position on the page that the absolute positioned objects within it use as their origin. Instead of positioning relative to the extreme top left corner of the entire page as would be the case without the outer div, our divs are now positioned relative to the top left corner of the relative positioned div that contains them. This is what allows our divs to be reflowed with the rest of the content of our web page since the outermost div is still within the main flow of the page content and will be positioned where ever the surrounding content puts it.

The CSS for the above scroll image and text looks like this:

.outer {position:relative;float:left}
.layer1 {position:absolute}
.layer2 {position:absolute;left:30px;top:15px;width:110px;
background-color:transparent;}

Note that I have allowed the first layer to default to being positioned at top:0 and left:0 and the image size of 170 x 200 defines how big an area the div will take up. If the div wasn't to be filled with an image then you'd need to specify a width and height as well.

For those of you who prefer to use tables to try to force your page layout rather than using stylesheets to do it properly I challenge you to produce a table layout that includes overlays like this (and remember that I have not defined any background images to go behind the objects in my example and I have only used one image).

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate