CSS Cascading Style Sheet: Positioning And Layering

Positioning and Layering

Table of Contents:

• 1) Introduction
• 2) Absolute Positioning
• 3) Relative Positioning
• 4) Controlling Positioned Elements
• 5) The Power of Invisibility
• 6) Layering Text and Images

In this stylesheets tutorial lesson, we\'ll discover what many people believe to be the coolest thing about CSS: positioning and layering.

As we all know, positioning text and images on a Web page with HTML is really hard. We have to use table tags and invisible spacer GIFs, and even then we\'re not guaranteed precise positioning because of variations in browsers and platforms.

If you\'re tired of these limitations, CSS will make you feel like a god. With the properties we\'ll discuss in this lesson, you can precisely position an element using exact pixel coordinates. Furthermore, you can layer positioned elements on top of one another and control what\'s on top. And there\'s even more, as you\'re about to see.

Here are the properties we\'ll be looking at:

• position
• left
• top
• width
• height
• overflow
• visibility
• clip
• z-index

Absolute Positioning

position

The position property is your key to a happier life. Witness:

H4 { position: absolute; left: 100px; top: 43px }

box of text exactly 100 pixels from the left edge of the browser window, and exactly 43 pixels down from the top edge.

Note that the only things specified are the left and top edges. That means that the text will flow normally all the way to the right side of the browser window, and will flow normally down the page.

The left and top properties are very straightforward: left defines the amount of space between the element and the left edge of the browser window, and top defines the space between the element and the top of the window.

For defining these distances, you can use length units or percentage values. Length units are the same ones we\'ve talked about previously: pixels, points, ems, inches, and so on. If you use percentage values, the percentage refers to the size of the parent element.

What can you position? Everything. Paragraphs, specific words, GIFs and JPEGs, QuickTime movies, and so on. Things can be positioned all over the place.

What we\'ve been talking about so far is absolute positioning. Hence the position: absolute part of the CSS rule. When an element is positioned absolutely, it\'s positioned independent of any other object on the page, as we\'ve already noted. It\'s as if that element doesn\'t "know" anything about what else is on the page. The positioned element does inherit other properties, however — font, size, and so on.

Is there an alternative to absolute positioning? Yes: relative positioning.

Relative Positioning

---

Relative positioning means that the position you specify for an element is relative to its natural position in the document\'s flow.

An example:

I { position: relative; left: 40px; top: 10px }

Essentially, when you use relative positioning, an element is positioned relative to where it would regularly be. As soon as you stop applying relative positioning, the flow of elements returns to normal, which can cause some overlapping problems.

In addition to positioning things as absolute or relative, you can also use a value of static. This simply means that the element will be positioned normally within the HTML as we\'re used to, with no special positioning applied to it whatsoever.

So far so good? Then let\'s look at controlling positioned elements.

Controlling Positioned Elements

---

In addition to controlling where the upper-left corner of an element is positioned, you can also control the width and height of the element and what happens to content that overflows its boundaries.

width

Remember how positioned text on the previous pages would still flow normally to the right? With the width property, you can control how far the text flows — that is, how wide the box that contains the element should be.

DIV { position: absolute; left: 200px; top: 40px; width: 150px }

When the Web browser sees this rule, it will position the text as expected, but it will also limit the maximum horizontal size of the paragraph to 150 pixels.

The width property works only on absolutely positioned elements. You can use any length unit we\'ve already discussed, or you can use percentage values, which refer to the parent element\'s width.

In IE 4 and 5, this property also works on images. You can artificially stretch or compress a graphic by setting width.

height

The height attribute works just like width, only in the vertical direction:

DIV { position: absolute; left: 200px; top: 40px; height: 150px }

Unfortunately, Communicator doesn\'t support height. And watch for occasional bugginess in IE 4 and 5, too.

overflow

What happens if the content of a box is bigger than the height and/or width you\'ve defined for it? You can decide with overflow.

DIV { width: 150px; height: 150px; overflow: scroll }

This works on block-level elements, whether or not they are positioned.

Your choices are:

• visible — all the content will be displayed, even if it goes outside the declared boundaries of the box.

• hidden — the browser clips off whatever content goes "over the line." That is, it won\'t display part of the content.

• auto — the content will be clipped, but this time the browser will display a scrollbar if it\'s needed, so the user can get to the rest of the content.

• scroll — the content will be clipped, but this time the browser will always display a scrollbar, even if it\'s not required.

The overflow property is supported by IE 4 and 5 for Windows, but that\'s it.

Now let\'s look at another CSS superpower: the power to be invisible.

The Power of Invisibility

---

visibility

With CSS, you can actually make elements invisible on the page. This works on elements whether or not they are positioned.

H4 { visibility: hidden }

I would show you an example, but since it would be invisible, there really isn\'t any point, is there?

Your choices are:

• visible makes the element visible.
• hidden makes the element invisible.
• inherit means it will inherit its visibility from its parent element.

When an element is hidden, it still takes up the same amount of room in the browser window; you just don\'t see it. So, if you\'re wrapping text around an image that you\'ve hidden, the text will appear to wrap around an empty space.

Keep this property in mind when you\'re scripting. For example, you might want to make a paragraph or image visible only when the mouse rolls over something.

Communicator does not support visibility. IE 4 and 5 users, enjoy!

clip

With clipping, you can control exactly which parts of an element are visible and which are invisible.

H2 { clip: rect(10px 200px 100px 40px) }

This property works only on those elements that have been absolutely positioned. (Thankfully, it works in Communicator 4.x and IE 4 and 5!)

Clipping affects the display of the element, but not the page layout. So, whatever you clip still takes up room on the page.

The code above sets up a clipping region that is a rectangle (which is the only shape supported so far). Everything within the clipping region will be displayed. The top of our example region is 10 pixels from the top of the box containing the element. The right side is 200 pixels from the left edge of the box. The bottom edge is 100 pixels from the top of the box. And the left side is 40 pixels from the left edge of the box.

That means that if the gray box below were a paragraph (or an image), the clipping region would be the yellow line. Thus, only the black region of the entire paragraph would be visible.

You could also use any other length units, or even percentage values if you wish. A value of auto means that no clipping will occur. By the way, negative values for clip are permitted.

Clipping can come in very handy in the world of dHTML, temporarily hiding or exposing elements as needed. (Imagine creating a pulldown menu in dHTML: When a user rolls over a header, the clipping region enlarges to reveal the links below the header.)

OK, Mulder, so now we can position stuff and control it on the page. How about layering things on top of one another? Follow me ...

Layering Text and Images

---

Here\'s what I\'ve been promising all along regarding the best way to overlap elements on a Web page. It\'s not a negative margin or small line-height. It\'s a combination of position and ...

z-index

When you position multiple elements and they overlap, use z-index to specify which one should appear on top.

H2 { position: relative; left: 10px; top: 0px; z-index: 10 }
H1 { position: relative; left: 33px; top: -45px; z-index: 1 }

Watch these CSS rules play out (I\'ve colored the

text green so you can see the difference):

Stylesheets

Mania

Since the

text has the higher z-index value, it appears on top of the

text.

 

(Note: IE 4 and 5 are sometimes buggy with z-index.)

Use plain integers for the values. The z-index property works for elements that are positioned absolutely or relatively.

And of course you can also give images a z-index. (With Communicator, it\'s best to wrap the tag in a or

tag, and then apply the property to the or

.)

Congratulations! You\'ve now made it through all the individual stylesheet properties. But you can\'t truly master stylesheets until you read the next page.