Position Property and Z-index Property

6/3/2021

Position Property

The position property is used to remove elements from normal flow.

Static positioning: this is the default and represents normal flow.
```
position: static;
```
Fixed positioning: this removes the element from normal flow and causes the element to remain in place even if the web page is scrolled around it. Generally a location is specified using the left, right, top, or bottom attributes.
```
position: fixed;
```
Relative positioning: this property changes the location of an element relative to normal flow. The designer can adjust the position to the left, right, top, or bottom and can specify the amount of offset.
```
position: relative; 
left: 30px;
```
Sticky positioning: this is a relatively new option that combines relative and fixed. The element will scroll until reaching a set position; then the element will become fixed.
```
position: sticky; 
top: 0;
```
Absolute positioning: This property specifies a specific location for an element. The designer must specify an offset as well.
```
position: absolute;
left: 200px;
top: 100px;
```

Z-Index Property

The z-index property allows the designer to work in three dimensions! Essentially this property allows items to be stacked on top of one another (or below if negative values are provided).

z-index: 2;