Help:Wiki University HTML-- Position - Absolute

From FamilySearch Wiki
Jump to: navigation, search
MAIN PAGE
WIKI
WIKITEXT
HTML/CSS
FAMILY HISTORY CENTERS
VISUAL EDITOR

Lessons


Flexbox/CSS Grid

Additional Helps

ABSOLUTE POSITIONING

  • 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.

Here is an object which we place 120 pixels from the top and 120 pixels from the left side of the page.







  • NOTICE our object covers part of the sidebar.

PLACING AN ABSOLUTE POSITIONED OBJECT

Here is the coding for our absolute positioned object:

<div style="position:absolute; top:400px; left:120px; width:200px; height:100px; background-color:blue"></div>

  • 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:

    <div style="position:relative; border:1px solid red; height:200px">
    <div style="position:absolute; top:50px; left:50px; width:200px; height:100px; background-color:blue; border:2px solid orange"></div>
    </div>

    • 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 . . . .

    Tests.gif
    Exercises
    1. Make this object <div style="width:200px; height:75px; border:2px solid green; background-color:orange; "> 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.




    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

    Navigation menu