Positioning
Part 1
In the previous exercise, we used floats to put elements side by side. In certain situations, relative- and absolute-positioning.
- The first thing we do is define the "origin point" for our absolutely-positioned elements. Since
.section
is our primary contentdiv
, target.section
and set it toposition:relative;
. Now positioned-elements inside.section
s will, by default, start in their upper-left corner. - First lets make a place for our sub-navigation: add a statement to your
.section
rule that adds a fairly large left margin (150px). - The in-page navigation (
ul#sub-nav
) is marked up an unordered list with same-page anchor-links in it. Start the rule by removing the bullets, then set it toposition:absolute;
. The sub-nav should get pulled out of the document flow and land in the space you made for it.
Part 2
- Using the logic from Part 1, target the image below and position it out in the left-column. Remember that
position:absolute;
can taketop
andleft
values.
Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in dolore deserunt mollit animreprehenderit in dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia sunt in culpa qui officia deserunt mollit anim id est laborum. In reprehenderit in voluptate velit esse cillum id est laborum. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Part 3
position:fixed;
is different and simpler thanpostion:absolute;
: elements will be pulled out of the document flow and be positioned according to the browser window, now matter what elements they are nested in. Useposition:fixed;
to target the footer on this page and attach to the bottom left corner of the browser. Add a background color and use a fixed width to ensure the type is legible.