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.

Placing a absolute positioned object
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.
 * We also have to state where to position it in relation to the either edge or the top of the page.


 * You can leave either or both out but if you do, it could end anywhere on the page.

Absolute inside relative positioning
  
 * One of the main problems with absolute positioning is that if you add new material at a later date above the object you will have to move it down as it will not move automatically like relative positioning does.
 * In order for absolute positioned objects to move like relative positioned objects you have to place absolute positioned objects INSIDE relative positioned objects.
 * Relative positioned objects do move when new material is added above it even if there is an absolute position object inside of 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