Help:Wiki University HTML-- Position - Absolute





<< Previous Chapter Next Chapter >>

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 as it does not create a space in the flow of the page.
 * Absolute position will cover up anything in that spot even another absolute positioned object.
 * NOTICE our object covers part of the sidebar.

PLACING AN ABSOLUTE POSITIONED OBJECT Here is the coding for our absolute positioned object:  
 * NOTICE position:absolute.
 * NOTICE left:120px. If we had used left:220px, the sidebar would not be covered.
 * NOTICE top:400px.
 * So what happens if you don't specify the position in pixels? It is placed up against the object above it.

ABSOLUTE INSIDE RELATIVE POSITIONING    
 * One of the main problems with absolute positioning; if you add new material the absolute positioned object will not move like relative positioning does.
 * In order for absolute positioned objects to move with the flow you have to place absolute positioned objects INSIDE relative positioned objects.
 * Relative positioned objects WILL MOVE even if there is an absolute position object inside of it.
 * Here is an example of a relative positioned object that has a red border with an 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 tags in red.
 * You can have as many absolute positioned objects as you want between the opening and closing div tags of relative positioned objects.

TRY THESE OUT. . . ..

 Exercises Check your answers
 * 1) Make this object an absolute positioned object 0 pixels from the left and 0 pixels from the top  to appear inside a relative positioned object with width of 400 pixels, height of 200 pixels and a red border one pixel thick.
 * 2) Take your answer above and move the relative object with the absolute object inside 150 pixel to the left and 50 pixel from the top:
 * 3) Take your answer from no. 2 and move the absolute object inside the relative object 150px to the left and down 25px from the top.

<div style="border-top:10px solid lightgray; border-left:10px solid lightgray; border-right:10px solid lightgray; border-radius:5px; "> Quick Quiz
 * Absolute positioning places objects in relation to the edge and top of the page.
 * A. True
 * B. False


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


 * Absolute positioning covers up all objects that follow it.
 * A. True
 * B. False

<div style="width:160px; height:20px; padding-top:3px; padding-left:10px; background-color:orange; color:white; border:1px solid orange; border-radius:5px; ">Check your answers

<< Previous Chapter Next Chapter >>