Two features of positioning in CSS are the ability to "float" elements to the right and left, and the ability to "layer" elements if they are placed in the same position on a page.

An element is said to float when it interrupts the normal order of other elements so that they flow around it. CSS allows elements that float right (positioned against the right margin so text flows around the left side) or float left (on the left margin with text flowing around the right).

Layers are our way of thinking about elements in the third dimension. CSS allows us to place more than one element in the same absolute position on a page, and when we do that, the elements can cover one another up. They can be placed in front or in back, stacked on one another, or in mathematical terms, placed on the "z-axis".

We'll start here by looking at the basics of floating elements; then we'll go on to the fundamentals of layers.

In HTML, images have been able to "float" since browsers of the mid-1990s, so you're probably familiar with this feature. This is illustrated by the WCC logo at the right, which is rendered with the text "flowing" around its left side. Code to insert this image is at the very start of this paragraph, and looks like this:
<img src="wcctile.gif" width="72" height="72" alt="Example of an image floating right." align="right" />
The simple attribute align="right" is all it takes to float the text this way.

n the same way, images can be floated at the left. The initial letter "I" in this paragraph is a gif floated left with this HTML code:
<img src="i.gif" width="29" height="29" align="left" alt="Imaging floating left" />

Floating in CSS works just like HTML floating, except for two things:

1. Any HTML element can be floated - not just images.
2. The code is a little different, as you'd expect.

Here's a simple example:

But it looks just like normal text!

Yes, because we left if looking very ordinary. Here's how the same words come out with a border and a background color for the floating paragraph:

Floating in Stylesheets

The examples above used in-line styles. Here's the same text using code that has padding and margins around the floating paragraph to make it look a little better:

Here is yet another of Aesop's fables.

Copy it into your XHTML template and save it with a different name. Here's what to try with it:

1. Make the title an <h1>.
2. Make the story a paragraph.
3. Create a style for h1 that includes:
   1. a border;
   2. a background color;
   3. a size;
   4. a font family;
   5. Reasonable margins and padding.
4. For now, leave this up as a regular (non-floating) style and save it.
5. View the page in a browser and make sure it functions correctly as a non-float.
6. Return to the code and make <h1> float left.
7. Save and view it. Does it float left? What can be done to improve its appearance?
8. Return to the code to debug and improve the code; keep viewing and improving until you are satisfied.
9. Now make <h1> float right. Again, keep viewing and improving until you're satisfied.

Layers allow us some control over the "third dimension" of our Web pages. In order understand layers, we need some vocabulary to discuss dimensions.

In mathematics, the three dimensions of our normal physical space are labeled x, y, and z.

• x: horizontal (width)
• y: vertical (height)
• z: near-to-far (stacking level)

Web pages are fundamentally two-dimensional spaces, but when elements overlap, the third dimension comes into play.

When do Web elements overlap?

• In HTML, we've been able to use three dimensions through the background attribute of elements. Whenever we put images in the background, the text and in-line images overlap with the background image.
• In CSS, we can put two objects in the same place by using the positioning attributes.

Let's take a look at how objects overlap...

Here's a table with two objects in it: a paragraph of text, and a blue ball. We'll place both objects so they overlap.

Code View
<img src="x23c_f02.gif" alt="ball" style="position: relative; top: 0px; left: 50px;" /> <p style="position: relative; top: -100px; left: 5px; font-weight=bolder">THE BEASTS of the field and forest had a Lion as their king. He was neither wrathful, cruel, nor tyrannical, but just and gentle as a king could be.</p>
Browser View
THE BEASTS of the field and forest had a Lion as their king. He was neither wrathful, cruel, nor tyrannical, but just and gentle as a king could be.

This illustrates two things:

• The code for putting objects in position relative to where they would have come; and
• The fact that if we don't state the order of overlapping elements, the first one in the code will be laid down first, and the next one in the code will be laid down on top of the first. The is the normal flow or code order.

The effect of code order can be illustrated if we put the same code with the paragraph first. Since this is relative positioning, we'll also have to swap the positioning attributes to get them in the same places.

Code View
<p style="position: relative; top: 0px; left: 5px; font-weight=bolder">THE BEASTS of the field and forest had a Lion as their king. He was neither wrathful, cruel, nor tyrannical, but just and gentle as a king could be.</p> <img src="x23c_f02.gif" alt="ball" style="position: relative; top: -70px; left: 50px;" />
Browser View
THE BEASTS of the field and forest had a Lion as their king. He was neither wrathful, cruel, nor tyrannical, but just and gentle as a king could be.

When you want (or need) to control what's on top in some way other than with normal flow, there is a CSS attribute to handle it. Enter...

z-index

The z-index attribute is usually a whole number, which can be positive or negative. The greater the z-index, the closer to the viewer an element will be.

• The default value of z-index (if it isn't mentioned) is 0 (zero). So the normal layer for elements to exist on is layer zero.
• Negative numbers are always behind the positive ones.
• You can make z-index numbers just about as big as you like, but of course you can always make one just a bit bigger!

Here's a sample of code that illustrates the use of z-index. We'll take the last example and set the z-index of the text paragraph higher than that of the image, so the text will be guaranteed to render in front of the image.

Code View
<p style="position: relative; top: 0px; left: 5px; z-index: 2; font-weight=bolder">THE BEASTS of the field and forest had a Lion as their king. He was neither wrathful, cruel, nor tyrannical, but just and gentle as a king could be.</p> <img src="x23c_f02.gif" alt="ball" style="position: relative; top: -70px; left: 50px; z-index: 1;" />
Browser View
THE BEASTS of the field and forest had a Lion as their king. He was neither wrathful, cruel, nor tyrannical, but just and gentle as a king could be.

An example with more layers is shown in this associated file. Study the code through your browser's View > [Page] Source menu.

Here are four images. Save them onto your disk.

1. Enter code to show each image in a Web file.
2. Check to make sure the images all show; correct and re-check if needed.
3. Arrangement 1:
1. Position the red and blue bars in three dimensions so that they form a "+" sign with the blue bar in front of the red bar.
2. Position the colored star in front of the yellow circle. Keep the circle/star pair separate from the two bars.
3. Check and correct until the figures are aligned and centered.
4. Arrangement 2:
   1. Position the yellow circle so that it is centered over the blue bar, with its lowest point aligned with the lowest point of the bar. Place the circle in front of the bar.
   2. Position the red bar in front of the yellow circle, centered on the circle with its lowest point aligned with the lowest point of the blue bar.
   3. Position the colored star in front of the red bar, centered on the yellow circle.
   4. Check and correct until the figures are aligned and centered in the front-back order specified.