Learn CSS-Lesson Display and positioning


I’m confused, page 5 of lesson says: “When an element’s position is set to absolute , as in the last exercise, the element will scroll with the rest of the document when a user scrolls.” And on page 6 it says the opposite: “And since fixed and absolute positioned elements are removed from the document flow, when a user scrolls, these elements will stay at their specified offset position.

Is this some kind of inconsistency in information provided to students or am I just not getting it?

Simplest way to test this is with a basic layout consisting of a few divs or sections. Give all the divs a relative property. Set the top one to ‘fixed’ and one nested in another div to ‘absolute’. Fill the divs with lorem ipsum and make the page long enough to turn on the vertical scroll. Now scroll. What happens?

<div id="top"></div>
<div><div id="nested"></div></div>
div {
    position: relative;
    width: 100%
#top {
    position: fixed;
#nested {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 80%;