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 above the image. What if we want to position these items differently than how the browser wants to do it? Here is where position attributes come into play.

Position attribute
Position attribuites allow you to place objects in precise locations on a page either independent or in relation to whatever else is on the page.

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.
 * Absolute position- places objects in relation to the entire page and it covers up whatever was placed in that spot whether it be text, images, etc or another absolutely positioned object.
 * Fixed position- places object in a fixed position on your screen. If, for example, you place your fixed position object 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 under it.

Relative positioning
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
 * When you place a relative positioned object on a page, whatever follows it will move down the page to compensate.  If the relative positioned object is 100 pixels high, text, images, etc will move down the page 100 pixels.
 * The relative positioned object creates a space or open area in the flow of the page and in the above example, a space 100 pixels high. Here is an example with a border so you can see what we are talking about.
 * The coding for relative positioning is placed in opening tags like so:
 * 


 * NOTICE position:relative;

One of the main uses for relative positioning

 * It can act as a container just like div tags.
 * In fact it is use many times as a container for absolute positioned objects.
 * This ability to act as a container makes it so that you can position objects absolutely inside a relative position object and then move the relative positioned object and all the absolute position objects inside will move with it and still keep their positions.
 * This is very handy when you think you might want to move a number of objects at the same time keeping their positions.
 * We will talk about this in the next chapter.

Try these out
 Exercises Check your answers
 * Place a "relative" positioned object that is 300 pixels wide and 100 pixels high between the first and second sentence of our Lorem ipsum paragraph.
 * Place a "relative" positioned object after the last sentence that has the following attributes:
 * width is 100%.
 * background-color:blue.
 * border 5 pixels thick and red in color.
 * that is 200 pixels high.

 Quick Quiz
 * Relative positioning places objects in relation to the edge and top of the page.
 * A. True
 * B. False


 * Relative positioning does not cover objects placed before it was.
 * A. True
 * B. False


 * Relative positioning covers up all objects placed after it was.
 * A. True
 * B. False

Check your answers