CSS Positioning Principles and Examples
You know how in XHTML you can use an attribute and a value to identify a particular element.
For example:
You also know that with CSS you can define a style for a particular element.
For example:
What CSS positioning does is apply a number of visual characteristics to two very special XHTML attributes "id" and "class."
Once the styles are defined in the CSS, then whenever that particular attribute is put inside an XHTML block element, such as:
- H1-H6
- div
- p
- blockquote
- ul
- ol
- table
The "positioning" aspect of CSS comes when you use a CSS property and value to set starting point on the screen in a browser from which the element will be moved.
For example:
In addition to "absolute" there are a number of other options
Position Values | How it Positions |
---|---|
Absolute | You can set how far the block will move from one of the edges of the browser, such as left, top, right, or bottom. |
Static | You can set how far the block will move from one of the edges of the browser, such as left, top, right, or bottom. |
Static | You can set how far the block will move from one of the edges of the browser, such as left, top, right, or bottom. |
Relative | You can set how far the block will move from one of the edges of the browser, such as left, top, right, or bottom. |
Fixed | You can set how far the block will move from one of the edges of the browser, such as left, top, right, or bottom. |
This is your main content section.
You should delete all of this text and replace it with text of your own. You can modify any text on your page with the Text formatting tools at the top of the page. To add other content, use the Media and Add-ons tabs. If you'd like to change your style template click on Styles. To add or remove pages use the Pages tab.