The CSS position property enables you to define where on a page you want an item placed. We will cover 4 values of the CSS position styling property: Static, Absolute, Relative and Fixed.
People will view your website with mobile devices, monitors of different sizes, and even large televisions. So you can't predict the dimensions and use them to determine the exact placement of onscreen elements but you can do things like position a text caption above or below an image, place a logo anywhere on the page, and much more.
Using the CSS position property, you can place a sidebar anywhere you want, or make sure a navigation bar is always displayed at the top of the page even once a user scrolls down the page.
Static positioning means the content follows the normal top-down flow of HTML. Static is the normal positioning method so unless you are overwritting a previously set style you won't need to specify to use the static position. We've only included it so that you are aware of its existence and what it is called.
The fixed position will ensure that an item stays fixed in its position no matter what or how the surrounding items are positioned. Some people use this code to create a "Sticky Top" or "Sticky Bottom". NOTE: - You can make an item stick to the bottom or top of the page but in real life, you would either choose sticky top or sticky bottom - not both because it would not give a lot of space for your middle content to be placed and still read easily.
A fixed-positioned item is sometimes called "sticky". You may have heard people say they want their website to have a "sticky bottom".
The absolute position style can be set by defining an element's top, bottom, left, or right position using pixels, ems, or percentages. Absolutely positioned elements are detached from the flow of the page - meaning the other elements on the page aren't even aware that the absolute positioned item exists!
Special note about the absolute position property: You can only use the 'static' property with this element. The 'float' or any other type of positioning other than static simply won't work.
The relative position style will place an item relative to the item just above it (it's parent).
A relatively positioned element is placed relative to its current position in the HTML flow. The main benefit of relative positioning is to set a new point of reference for absolutely positioned elements.
After you watch the video on absolute & relative positioning, please leave a comment (on YouTube) to indicate that you have completed this step. In the comments, write something like "I am familiar with the difference between absolute and relative". But if you still don't understand something, please write that in your comments too. (43 minutes.
Practice writing CSS for items to be absolutely positioned and relatively positioned.