Positioning allows you to control how elements are rendered on the web page. There are several types of positioning methods in CSS:
1. Static: This is the default positioning model. Elements flow according to the HTML order.
1. Relative: The element is positioned related to its normal position (i.e., where it would have been if it were static).
```
div {
position: relative;
top: 20px;
left: 30px;
}
```
1. Absolute: The element is positioned relative to the nearest positioned ancestor (instead of the viewport like fixed). However, if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with the page scrolling.
```
div {
position: absolute;
top: 20px;
left: 30px;
}
```
1. Fixed: The element is positioned related to the viewport or browser window’s size. It will not move even if the page is scrolled.
```
div {
position: fixed;
top: 20px;
left: 30px;
}
```
1. Sticky: It’s a combination of relative and fixed. A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport, then it sticks in place like position: fixed.
```
div {
position: sticky;
top: 0;
}
```
You can also change the default stacking order using the z-index property if your element is positioned in any other way than static.
```
div {
position: relative;
z-index: 1;
}
```
These properties are mostly used with `top`, `right`, `bottom`, `left`, and `z-index` properties.
