Absolute Positioning

This is very hard to see in a browser, because it has the default font and position, viz left-to-right and top-to-bottom. This is because we have not applied the style class = "text" to this <p> element. So, the paragraph will be repeated in an absolute position.

The paragraph above is very hard to see in a browser, because it has the default font and position, viz left-to-right and top-to-bottom, i.e. the natural flow in a page. This is because we had not applied the style class = "text" to that <p> element. Here the paragraph is presented in an absolute position below the doggie and in a much nicer font, Ariel. Note that the default position totally ignores the elements which were absolutely positioned, hence they were overwritten!
The top and left style properties specify the number of pixels from the top and left margins to place the content within its block-level element, in this case the body or paragraph.
The z-index style property specifies layering of overlapping elements. Elements with greater z-values are displayed over those with lower ones. If an element has no z-value the default is to display elements presented later overlapping those presented earlier in the document flow.
Look carefully at the doggie's tail as she jumps. Now reverse the z-values in the external style sheet, "absstyle.css" and see what happens! All you need to do is refresh the page in your browser. The page has not changed at all, only its external style sheet. This is why these are so much superior to the obsolete HTML and also to internal style sheets.

Not withstanding that, we will still use embedded style sheets in occasionally in this tutorial for convenience of looking at both the style and content in the same window.

OK, the next page will demonstrate Relative Position