Position property used for positioning method used for an element. This is mainly used for positioning elements ex- left, right, bottom, top, fixed etc, and you get the final desired outcome.
Static Position
Static is the default positioning value. It’s the position according to the Html document, you can’t set attributes like top, bottom, left, right.
Example
html
CSS
outcome
This example you can see I set left and top attributes buts it's not working. because it's follow HTML document flow. it is default value of static position.
Relative Position
This position value is similar to static position, it follows HTML document flow, and you can set attributes like top, bottom, right, left, according to your desired outcome.
Example
HTML
CSS
outcome
In this example, you can see it follow html document flow and you can set top, bottom, left, right.
Absolute Position
This position value is a powerful type of positioning it allows you to literally place anywhere on the page, exactly where you want, it depends on the parent element, not Html document flow. If there is no such parent element available it’ll follow root element . You can set attributes like top, bottom, right, left.
Example
html
CSS
outcome
Fixed Position
This position does not depend on the parent element, HTML document flow and root element. It depends on the browser window itself. The view doesn’t change when the window is scrolled.
html
CSS
outcome
