Positions

With the help of position property we can put an element anywhere on our page

This sometimes makes it difficult to make our sites responsive

Normal flow of the page, a web page goes from top to bottom

Positions

static (normal flow which is default)

relative (from its initial position)

absolute: closest non-static parent. Breaks the normal flow

fixed: will stay fixed in respect to the viewport

sticky will change from static to fixed on user scroll

4 offsets: top, bottom, left, right

z-index requires a number that changes the stacking in 3D space

Floats

Floats was used to create layouts in early web dev days. These days it’s strongly disagreed to create layouts using floats. Here are some float properties just if you are curious: float: left/right/clear and there was something called clearfix when working with floats

Instead tools like flexbox are much better for these tasks