CHAPTER 13. POSITIONING: RELATIVE AND ABSOLUTE 142
Directions are relative to the corresponding edge of the ancestor. Positive
numbers move toward the center of the ancestor, and negative numbers move
away.
left: 5px; This will move the left edge of the element 5px to the right
compared to the left edge of its ancestor. Negative numbers move it to the
left.
right: 5px;This will move the right edge of the element 5px to the left
compared to the right edge of its ancestor. Negative numbers move it to the
left.
top: 5px;This will move the top edge of the element 5px lower compared
to the top edge of its ancestor. Negative numbers move it up.
bottom: 5px;This will move the bottom edge of the element 5px higher
compared to the bottom edge of its ancestor. Negative numbers move it
lower.
If both top and bottom are specified, top takes precedence and bottom is
ignored.
13.3.2 position: fixed;
Exam Question 262(p.351): Which CSS position depends on the view-
port?
Required Answer:fixed
With fixed, the element is removed from the flow. It takes its position
relative to the edges of the viewport. Its position will not change even if the
rest of the webpage is scrolled up or down, left or right.
This can be handy for headers or footers or navigation that you want to
always be visible. But because they are removed from the flow, you may
need to add margins to the rest of your content so it is not covered by the
header or footer.
Directions are relative to the corresponding edge of the viewport. Positive
numbers move toward the center of the viewport, and negative numbers
move away.
left: 5px; This will move the left edge of the element 5px to the right
compared to the left edge of the viewport. Negative numbers move it to the
left (off screen).