Help:Wiki University Wikitext--Position - Absolute

Absolute positioning
Here is an object which we place 120 pixels from the top and 120 pixels from the left side of the page.
 * It is like relative positioning, but it differs in fact that it allows you to place an object just where you want on a page.
 * It has nothing to do with where the browser would put it by default.
 * Absolute position put the object in a certain spot regardless of what is around it.
 * In fact it will cover up anything that is in that spot even another absolute positioned object.


 * NOTICE our object covers part of the sidebar because the sidebar is wider than 120 pixels.

Here is the coding for our absolute position object: 
 * NOTICE position:absolute.
 * NOTICE left:120px.
 * NOTICE top:450px.
 * Like in relative positioning, we have to tell the browser that we are dealing with positioning absolute.
 * Like in margins, we have to say where the object is to be placed in relation to the left side of the page.
 * We also have to state it's position in relation to the top of the page.


 * You can leave either or both out but if you do, because it is an position absolute attribute which has to be told where to be placed it will put itself at the top of the page.

Absolute inside relative positioning
  
 * One of the main problems with absolute positioning is that if you add material above the object you will have to move it because will cover it up the new stuff.
 * Because of the inflexability of absolute positioned object to move automatically when new material is added above it, you are encouraged to place absolute positioned objects INSIDE relative positioned objects.
 * Relative positioned objects do move when new material is added above it.
 * Here is the coding for a relative placed object that has a red border with a absolute positioned blue box placed inside it.
 * Here's the coding:
 * NOTICE the absolute positioned blue box coding is between the opening and closing div tag in red.
 * You can have as many absolute positioned objects as you want between opening closing relative position objects.
 * Absolute position objects behave inside relative positioned objects as if they were isolated objects on a page.

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