POSITION
CSS position allows you to position elements, e.g. text, graphics, etc., where ever you wish on your page. For example, the bottom frame of both My Help Pages Introduction and My Page Builder Help Page Introduction are done with CSS Positioning.
There are four types of position:
- static - the element is placed in the normal flow where it occurs.
- relative - move an element relative to its normal position.
- absolute - places an element at a specific place on the page.
- fixed - as in absolute but also doesn't move when scrolling occurs.
Only the relative and absolute positions are discussed here.
Position format is:
position:type;property1:value1;property2:value2;property3:value3;....
and has eight properties that can be used:
- left - Sets how far the left edge of an element is to the right/left of the left edge of the parent element. Values are: auto, %, length.
- top - Sets how far the top edge of an element is above/below the top edge of the parent element. Values are: auto, %, length.
- z-index - Sets the stack order of an element. Values are: auto, number
- overflow - Sets what happens if the content of an element overflow its area. Values are: visible, hidden, scroll, auto.
.
- bottom - Sets how far the bottom edge of an element is above/below the bottom edge of the parent element, which can be another element such as a graphic. Values are: auto, %, length.
- clip - Sets the shape, rectangle, of an element. The element is clipped into this shape, and displayed. Values are: shape, auto.
- right - Sets how far the right edge of an element is to the left/right of the right edge of the parent element. Values are: auto, %, length.
- vertical-align - Sets the vertical alignment of an element. Values are: baseline, sub, super, top, text-top, middle, bottom, text-bottom, length, %.
The first three properties will be discussed in this section and the overflow will be discussed in its own page.
Example - 1 POSITIONING TEXT -
Microsoft Internet Explorer (IE) and Netscape 6.1+ (NS)
<div style="position:absolute;left:150;top:150">This Text Is Positioned.</div>
You can use a graphic in place of the text:
<div style="position:absolute;left:150;top:150"><img src="graphic-file-name"></div>
This example above will position the text 150 pixels from the left side of the screen and 150 pixels down from the top. Click here to see example 1.
Example - 1 POSITIONING SECTIONS OF CODE -
Two pages that introduce my Help and Page Builder pages have columns of text, tables, and graphics that are done with CSS Positioning. You can read more about at Web Page Design.