To request editing rights on the Wiki, click here.

Help:Wiki University Wikitext--Position - Absolute

From FamilySearch Wiki
Jump to navigation Jump to search

Lessons


Intermediate


Advanced


Flexbox


Additional Helps

Absolute positioning[edit | edit source]

  • 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 320 pixels from the top and 110 pixels from the left side of the page.







  • NOTICE our object covers part of the sidebar.

Placing an absolute positioned object[edit | edit source]

Here is the coding for our absolute positioned object:

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

  • NOTICE position:absolute.
  • NOTICE left:110px. If we had used left:210px, the sidebar would not be covered.
  • NOTICE top:320px.
  • So what happens if you don't specify the position in pixels? It is placed up against the object above it.

Absolute placed INSIDE of relative positioning[edit | edit source]

  • 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[edit | edit source]

    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