Technical Blog - CSS Concepts
September 4, 2023
Positioning in CSS
There are several ways to position elements in CSS. The main ones are: static, relative, absolute, and fixed positioning. The different types of positioning influence how elements in an HTML file will be laid out in the document.
Static Positioning
Static positioning is the simplest default way an element is positioned in HTML. It forces other static and relative elements to be placed next to it rather than on top of or overlapping it.
![Image with static positioning](../images/html-css/static-pos.png)
Relative Positioning
Relative positioning acts in the same way as static positioning, except when an element is relative, you can use properties like 'top, bottom, left, right' to offset its position in the document. Any offset relatively positioned elements will not affect the position of any other elements in the document. This can lead to elements overlapping each other.
![Image with relative positioning](../images/html-css/relative-pos.png)
Absolute Positioning
When an element's position is set to absolute, it will position itself relative to its closest relative parent or the root of the document. You can offset an absolute element like you would a relative one.
![Image with absolute positioning](../images/html-css/abs-pos.png)
Fixed Positioning
Fixed positioning is the same as absolute except the element is positioned relative to the browser window.
![Image with fixed positioning](../images/html-css/fixed-pos.png)