Flash cards
Review the key moves
What is the main idea behind CSS Fixed and Absolute Positioning?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
___: fixed;Put the learning moves in the order that makes the concept easiest to apply.
CSS position: fixed
An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used set the final location of the element.
A fixed element does not leave a gap in the page where it would normally have been located.
Notice the fixed element in the lower-right corner of the page. Here is the CSS that is used:
Example
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}Live preview
CSS position: absolute
An element with position: absolute; is positioned relative to the nearest positioned ancestor (with position other than static).
However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
Note
Absolute positioned elements are removed from the normal document flow, and can overlap other elements.
Here is a simple example
Here is the CSS that is used:
Example
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid green;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid
red;
}Live preview
Positioning Text On an Image
How to position text on an image: