Help:Wiki University Wikitext--Position - Relative

Default positioning
We have seen thus far that text, images, etc position themselves on a page in the order they were loaded. If text was placed first and an image next, the text would be at the top with the image below it. What if we want to position these items differently than how the browser wants to do it. What if we want the image to be down from the top of the page, say 100 pixels, and not be at the mercy of the browser, can we do that? Yes we can with positioning attributes.

Position attribute
Position properties allow you to place objects in precise locations either independent of whatever else is on the page or in relation to whatever else is on the page. This is a very useful attribute to know and use.

Property values

 * There are six possible property values, but only three really have any use in FamilySearch Wiki:
 * Relative position - places objects in relation to where your browser put place it. Covers up whatever was place in that spot if it was loaded before your relatively positioned object.
 * Absolute position- places objects in relation to the entire page and it covers up whatever is in the same spot if it was loaded before your relatively positioned object.
 * Fixed position- places object in a fixed position on your screen. If you place it in the middle of your screen, it will stay there regardless of how much you scroll down the page.  This too covers up whatever is on the page.

Relative positioning

 * Relative positioning basically means placing an object in a place relative to where the browser would put it.
 * If you wanted to put the object 100 pixels to the right in relation to where the browser would put it, you would use relative positioning.
 * The coding for relative positioning is placed in opening tags like so:

Here is an object placed only by the browser:
 * NOTICE position:relative; .  This tells the browser that you want to place an object in a position relative to where the browser would put it.  But you have to tell the browser where you want to put it relative to where the browser would put it.
 * NOTICE left:100px; .  This tells the browser to put the object 100 pixels to the left of where the browser would put it.
 * NOTICE top:500px; .  This tells the browser to put the object 500 pixels from the top of where the browser would put it.
 * You also can use to the right or from the bottom in relative positioning, but you will probably have little use for these.

Browser Position Object Relative Positioned Object Here is the object placed with relative positioning of left 200 pixels and 100 pixels from the top. --->  The positioning measurements are taken from the upper left corner of the object to be moved to the upper left corner of the object where you wan it. (The little green squares mark the spot). In this case the upper left hand corner of "Relative Positioned Object" is down 100 pixels and left 300 pixels from the top left hand corner of "Browser Position Object."

Absolute positioning
See next chapter for absolute and fixed positioning.

Try these out
 Exercises Check your answers
 * Create a navbox using the above format.
 * For topics use the first 5 topics from the Germany_Genealogy page.
 * For Counties use the first 5 counties from the Anhalt_-_Herzogtum_(duchy) navbox at the bottom of the page.
 * Change the parameter to country.

 Quick Quiz
 * Navboxes should not include items that could be in a sidebar.
 * A. True
 * B. False


 * Navboxes are usually placed at the top of the page.
 * A. True
 * B. False


 * Navboxes are limited to less than 200 pixels in width.
 * A. True
 * B. False

Check your answers