Logo - Ockfen.net
Spearheading Effective Designs

CSS: Positioning

CSS Tutorial

CSS: An Intro
CSS: The Basics
CSS: Class, ID, Span, and Div
CSS: Positioning

THIS SECTION COVERS:


Positioning

Are you wondering how positioning works in Cascading Style Sheets and what it can do? Using positioning, images and text can be placed in specific locations. This opens up a world of special effects not possible through regular HTML. A layered effect can be created giving a 3 dimensional look and load time decreases as many individual graphic files are loaded or in the case of text, it's very fast since text only is being placed somewhere.

If you are using a lot of positioning on your pages, it's best to add code on your pages to designate a ground zero starting point, the uppermost left corner. Add this after the <body> tag in your code:

<topmargin="0" leftmargin="0" marginheight="0" marginwidth="0">

We assigned class names of H2.LARGESHADOW and H3.SHADOW which are written in our CSS external style sheet as:

H2.largeshadow {position:relative; top:-15px; left:100px; font-weight:bold; font-style:italic; font:40px book antiqua,serif; color:#9966cc;}

H3.shadow {position:relative; top:-15px, font-weight:bold; font:18px verdana,arial,sans-serif; color:#330066; margin-left:225px;}

The code for this is:

<H2 CLASS=LARGESHADOW>a b  o u t  u s</H2>

<H3 CLASS=SHADOW>Chester, Cort, Linda, Marilee, & Veronika</H3>

This is what the RESULTS look like.

There are two kinds of positioning:

Relative

This is used when placing an element in relationship to its original location and does not affect surrounding elements. Use relative positioning of images for text to flow around the image and when wish to place offsets.

With relative positioning, the positioned element and document are aware of each other, and the element will reposition itself as the document changes.

Relative positioning was used in our About Us header.

Absolute

Absolute positioning can be defined as placement based on the upper left corner of the nearest positioned parent, or the document's <BODY> element if there are no other positioned elements. It takes an element out of its normal flow and places it in an exact position relative to its parent element.

Keep in mind the following:
If the positioned element is not inside another positioned element, its coordinates will be from the <BODY> element's upper-left corner. If the element is inside another positioned element, its coordindates will be from the first positioned element's upper left corner instead.

Absolute positioning takes elements out of their normal flow (Elements flow in the order they appear or are coded. If a header tag is first, then an image tag, then the header appears with the image appearing after.) An absolute positioned element will overlap any other element(s), without the elements affecting each other.

A parent element is defined as the element that contains the current element. Sound confusing? It simply means if there are headers and paragraphs in a body tag, then the body tag is the parent element to the header and paragraphs. Think of it as an outline with the main numbered item being the parent and the next item underneath it as part of the parent. Then, if that next item has an item below it, then the parent to that item is the item that heads that list.

If absolute positioning is used to place an element and the element goes off the browser window, text and images will not wrap.

To make this all work, use the <DIV> tag.