A Smarter Way To Learn HTML & CSS(2015)

84
Relative and static positioning

As you know, the browser displays the elements of your page in the same order in which you write them in your HTML document. If you write a heading, follow it with a paragraph, follow that with a table, and follow the table with a second paragraph, the browser will display everything in that order:

Heading

Paragraph 1

Table

Paragraph 2

But as you saw in Chapters 64 and 67, you can interfere with this natural order. In those chapters, you learned how to position a header exactly where you want it regardless of its order in the HTML document using absolute and fixed positioning. So, with absolute and fixed positioning, where you place the code in the document doesn’t affect its position on the page. You could add the code to the very end of the body section, put it somewhere in the middle, or start it off at the beginning. Its location on the page is determined by the position you specify in your CSS, not its position in the HTML document.

And remember, with these types of positioning, all the other elements behave as if they don’t know the element is there. They don’t make room for it, as they do for normally positioned elements. This creates overlap unless you pull a trick like the one you learned in Chapter 68, creating an invisible copy of the header that’s positioned normally and so acts as a spacer, to keep the other normally-positioned elements from disappearing underneath the fixed-position header.

Both absolute and fixed positioning specify spacing in terms of how far they are from the edges of the browser window.

A third way to interfere with the browser’s default layout is to specify relative positioning. Relative positioning tells the browser to position an element a certain distance from its normal position.

For example, if you wanted to position some paragraphs 50 pixels below their normal position, you could write, for example…

p.spaced-out {
position: relative;
top: 50px;
}

If you wanted a table pushed up and nudged left, you could write, for example…

table#adjusted {
position: relative;
bottom: 25%;
right: 35%;
}

In relative positioning the other elements don’t adjust to the relatively positioned element’s altered position. They behave as if the element were in its normal position. So, as with absolute and fixed positioning, it’s possible to have overlap. If necessary, you can solve this with a spacing tactic similar to the one you learned in Chapter 68.

In most circumstances, you don’t have to tell the browser to position an element normally, since that’s the default. But just so you know, a normally positioned element has static positioning.

div.normal {
position: static;
}

In your CSS file, use relative positioning to move the div that you created for the last chapter to the right. Save the file. Display the page.

Sample CSS code is at:
http://asmarterwaytolearn.com/htmlcss/practice-84-1.html.

Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/84.html