Layers in CSS Tutorial

Standard HTML doesn't make it easy to place objects in exactly the right place. You can do so with imaginative use of tables, but there are situations in which it is not possible to do so. Other times you may need to place a particular image on top of another part of your web page.

As well a variety of formatting, border, and background effects, CSS allows you to convert any tag into a layer, which then ?floats? on top of other items, and can be positioned wherever you wish on the page.

1. A basic object which uses CSS

We'll start with a tag whose size and appearance we'll define using CSS.

<style type="text/css">
div.box {
	width: 300px;
	height: 30px;
	background: lightblue;
	border: 1px outset darkblue;
	text-align: center;
	padding-top: 6px;
}
</style>

...

<div class="box"> ... </div>

In this example we've used a div tag as a container for our code. The div container doesn't have any appearance on it's own, but if you apply a style to it using it's class attribute, you can give it any appearance you like.

2. Turning the object into a layer

We can turn this into a layer with only one additional line of code. Within the CSS definition for the div.box, add the following extra CSS property:

position: absolute;

You'll notice that this layer is now "floating" on top of the text. It no longer occupies space above the text and the text moves up. On Mozilla the layer will move into the top left corner, waiting to be moved somewhere.

3. Positioning the layer

Once we've created a layer, we'll need to specify its position. We can do this with X and Y coordinates which both extend from the top left corner.

Hence higher values of top will push the layer down the page
Hence higher values of left will push the layer right along the page

We'll move the layer to the right side of the page's main heading with this code:

position: absolute;
top: 19px;
left: 260px;

Using layers in this way is a natural means of producing a menu system, which always has parts of the HTML overlapping others. Additionally it allows a great deal more control of exactly where an element is placed. Using this, we can make sure our menu bar is exactly where it should be, and it can be made to line up with another image very easily.

See this tutorial for producing a menu system using CSS layers and JavaScript

4. Using relative positioning

Absolute positioning will always position an element from the very top left of a page. This is useful for moving things about that naturally appear at the top of the page. However it isn't so great for moving things further down the page as they may well end up lying on top of text. There is another scheme we can use, called relative positioning, which allows us to position a tag relative to where it would have been.

We'll use relative positining to cause a nice outdent effect, so that the headings are less indented than others.

b {
	position: relative;
	left: -5px;
}

Back to tutorials