WebReference.com - Part 2 from Chapter 11 of Cascading Style Sheets A Beginner's Guide, from Osborne/McGraw-Hill (1/5)

CSS: A Beginner's Guide

Element Positioning (CSS 1)

[The following is the conclusion of our series of excerpts from chapter 11 of the Osborne/McGraw-Hill title, Cascading Style Sheets: A Beginner's Guide.]

Although the float and clear properties give you the ability to control the positions of various elements on the page, it is a far cry from being able to move the boxes around as if they were small snippets of paper. Instead, the float and clear properties give you sort of an "if-then" type of layout ability. If you do this with one box, then the other box will do this. However, if you want to be able to directly position elements on a page anywhere you want them, then you need to understand CSS positioning schemes and the properties that are used to make them work.

Positioning Schemes

There are four positioning schemes that you can take advantage of when you are working with CSS--at least in theory. The problem with the various positioning schemes, as with anything else in CSS, is always one of browser support. Thus, while you have four positioning approaches to choose from, weak browser support reduces your options to three at best. The CSS positioning schemes are the following: static, absolute, relative, and fixed positioning.

Static Positioning

Static positioning is the easiest scheme to begin with because you are already familiar with it, although perhaps not by that name. It could best be described by the statement "Go with the flow." Static positioning simply follows the natural flow of the document, allowing elements to be positioned according to the position they hold in the source code. While the positions of element boxes may be altered slightly by margins, padding, borders, and the float or clear properties, the boxes still follow a basic succession from the top of the page down.

Absolute Positioning

Absolute positioning is the scheme that best approximates the old "cut and paste" layout mentioned earlier in this module. With absolute positioning, you can move and position element boxes anywhere on the page or anywhere within their parent boxes. You can even overlap boxes and create a "layered" effect if you want. (For more on how to do this, check out Module 12.)

Although absolute positioning may sound like a difficult concept, it's really quite simple. Suppose you set a position of top: 25% and left: 40% for an element. You are simply specifying the location of the top-left corner of an element's box in relation to the top-left corner of its containing block (parent element). Thus, absolute positioning is "absolute" because you are determining--without any other influencing factors--the position of a box within its containing block. In this case, your point of reference is the containing block's top-left corner. As the following illustration shows, the heading is completely taken out of the normal flow of the document and actually overlaps the paragraph that "follows" it in the HTML code:

An absolutely positioned headline

<html><head><title>Absolute Positioning</title>
<style>
h1        {background-color: black; 
           color: white; 
           position: absolute; 
           top: 25%; 
           left: 40%;}
p         {background-color: white; 
           color: black; 
           font-size: 1.5em;}</style></head>
<body>
<h1>This heading has been positioned 
    down 25% and across 40%.</h1>
<p>This paragraph has been left in its natural position.
   This paragraph has been left in its natural position.
   This paragraph has been left in its natural position.
   This paragraph has been left in its natural position.
   This paragraph has been left in its natural position.
   This paragraph has been left in its natural position.
</p>
</body></html>

[next]

Created: July 22, 2002
Revised: July 22, 2002

URL: https://webreference.com/authoring/style/sheets/beginners/chap11/2/