Thursday - Position Property

HTML elements, by default, will show in the order in which they were coded in your HTML document. With CSS Grid, we've addressed most positioning issues, but there may be times when you want some elements in your Web design to be separate from the grid. In those cases, the position property in CSS gives you some additional options.

Specifically, you can use this property the same way we used the background-attachment property to make the background image sticky. The value we used for that will work here, too: set it to fixed and the element will stick wherever it starts no matter how you scroll the screen.

In addition, you can set it to absolute, which will stick the element to another element (rather than to a static location in the display window). I will demonstrate these for you on the big screen and you can add the code to your main.css as makes the most sense for your project.

And, as it turns out, there is an option to apply sticky as the value. That value will start the element with a relative position but if you scroll down to the point where your sticky element would scroll off the top of the screen, its position changes from relative to absolute.

As usual, there is a good W3Schools tutorial on the position property that you should use to supplement my demonstration.