CHAPTER 13. POSITIONING: RELATIVE AND ABSOLUTE 139
As we play with positioning, we often want things to overlap (or underlap),
one on top of the other, like menus on top of content, or one piece of content
on top of another.
Positioning helps us do all those things. Positioning can take an element
out of the normal flow and anchor it to the viewport or to some movable
element of the page.
There are four basic position types:static,relative,absolute, andfixed.
Exam Question 248(p.350): List the four CSS position: options.
Required Answer:static, relative, absolute, fixed
Why these four words? I have no clue. These words do not have any clear
natural meaning. They are confusing to the point of being meaningless. You
just have to memorize them.
13.1 Directional Adjustments
Static is the default, and should never be used except when trying to cancel
out one of the other options.
Except for static, we can adjust the position of an element by giving an
offset to one or more of its edges.
There are four directional adjustments:left:,right:,top:, andbottom:.
Exam Question 249(p.350): List the four CSS positioning directions.
Required Answer:left, right, top, bottom
Positive distances move toward the centerof your “anchor” (the thing
on which your position is based), and negative distances move away from
center.
Thus, for left: a positive distance moves you right. For right: a positive
distance moves you left. For top: a positive distance moves you down. For
bottom: a positive distance moves you up.
Exam Question 250 (p.351): If we say left: 5px; which direction will
things move? (left or right)
Required Answer:right
Exam Question 251(p.351): If we say left: -5px; which direction will
things move? (left or right)