CSS Positioning
As I stated back in the borders section:
"A web browser treats every element on the page as a box. And as a box it has certain
properties that you can adjust with CSS."
What we're interested in here is the position of that box. Now you could position each and every element on your pages, but that could be time consuming and difficult. The best thing to do may be to divide your page up into sections, put each of those sections into a box of their own and position each of those boxes. The content of those box's will move with them. The easiest way to do this is by using the <div></div> tag coupled with the id="" or the class="" properties.
Take a look at this page. So you can see them, I've put borders around all the divisions I've used to hold and position content. I then used CSS to control the width and height of these divisions as well as putting them on the page in places they would not normally go with HTML. CSS allows pixel precision with placement as well as the ability to overlap elements and control which one is on top of the other.
You may have noticed that there are boxes nested within other boxes. I do this so I can position some of the content of those boxes within them. Again, this allows you to place things on a page in places they would not normally go with HTML.
| Property | Value | Description | N.N. | I.E. |
|---|---|---|---|---|
| position: |
static relative absolute fixed |
Positions an element on a page with regards to its parent element | 4.0 | 4.0 |
| top: |
auto length percentage |
Sets how far above or below the top of an element is from the top of its parent element | 4.0 | 4.0 |
| left: |
auto length percentage |
Sets how far left or right the left side of an element is from the left side of its parent element | 4.0 | 4.0 |
| bottom: |
auto length percentage |
Sets how far above or below the bottom of an element is from the bottom of its parent element | 6.0 | 5.0 |
| right: |
auto length percentage |
Sets how far left or right the right side of an element is from the right side of its parent element | -- | 5.0 |
| vertical-align: | super sub top middle bottom baseline text-top text-bottom |
Aligns an element with the text or other elements | 6.0 | 4.0 |
| z-index: | auto number |
Sets the stacking order of elements on the page | 6.0 | 4.0 |
|
||||
You might remember the vertical-align: style from the section on text. It's here because it not only pertains to text but to other elements as well. If you don't remember all the ins and outs of it just click on it in the table above to go back to text and refresh your memory. Otherwise, I won't repeat it here.
