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 placed in that spot whether it be text, images, etc or another relatively positioned object.
 * 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 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 under it.

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.
 * 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 "right" or "bottom" in relative positioning, but you will probably have little use for these.

Browser Positioned Object Object Repositioned Here is the object placed with relative positioning 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 want it. (The little green squares mark the spot). In this case the upper left hand corner of "Object Repositioned" is down 100 pixels and left 300 pixels from the top left hand corner of "Browser Positioned Object."

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
 * Take this object and place it 75 pixels to the left and 20 pixel from the top from where your browser wants to put it:
 * Take this object and place it 275 pixels to the left and 50 pixel from the top from where your browser wants to put it:

 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 covered after it was placed.
 * A. True
 * B. False

Check your answers