# The Position Property in CSS --- # The Position Property in CSS * The **CSS position property** is used to position an element on the web page. It has a different positioning method that is used by elements during positioning on the web page. * These positioning methods are `static`, `relative`, `fixed`, `absolute` or `sticky`. * **CSS Positioning Properties are:** 1. CSS Static Positioning 2. CSS Relative Positioning 3. CSS Fixed Positioning 4. CSS Absolute Positioning 5. CSS Sticky Positioning * ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1679222834680/c679ca6d-fe96-4bf9-bbb3-6e8702478998.png align="center") Elements are then positioned using the top, right, left and bottom properties. However, these properties will not work unless the position property is set first. They also work differently depending on the position value. * ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1679223836861/80b76b96-46b8-4ef0-b037-839bf2c52578.png align="center") # How to use CSS Position Properties ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1679224019139/73e136ce-d6f3-4246-8b99-697a82174808.png align="center") ## 1.CSS **Static Position Property** * This is the default positioning of the HTML element and it is not affected by the top, bottom, left, right, and z-index properties. * An element with `position: static;` is not positioned in any special way; it is always positioned according to the normal flow of the page. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1679224410010/4afd5851-6774-4bf6-a5f1-534ae0715986.jpeg align="center") * **The Image shows the Static CSS Positioning property** * **Example:** * %[https://codepen.io/Yashoda11/pen/WNgKmOX] * In this example, CSS `position:static` property is used. Please keep in mind that this property is applied by default on the element. The `left`,`right`,`top`,`bottom` property can not work with the static property of position. ## 2.CSS **Relative Position Property** * The Relative positioned element is positioned itself relative to its normal position. After applying the following relative properties like `top`,`bottom`,`right` and `left` the box element will be shifted with respect to its normal position. * ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1679226357499/c8f033e0-ab58-4737-b767-91c28e881c08.jpeg align="center") * **The Image shows the Relative CSS Positioning property** * **EXAMPLE:** * %[https://codepen.io/Yashoda11/pen/yLxqwWG] * In this example, CSS `relative` property of the position is used. * After applying CSS relative property, the element can be shifted from its normal position after providing top and right property values. ## 3.CSS **Fixed Position Property** * An element with `position: fixed;` is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element. * A fixed element does not leave a gap in the page where it would normally have been located. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1679227287731/5deee836-7c1b-4fda-b853-6c6bf0eb502f.png align="center") * **The Image shows the Fixed CSS Positioning property.** * **EXAMPLE:** * %[https://codepen.io/Yashoda11/pen/jOvpRbX] * In this example, the CSS `fixed` property of the position has been used. * After applying CSS fixed property, the element can not move after the page scroll. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1679228091657/95fa9bea-6bc2-48a7-a1a9-b92b2c891a5e.jpeg align="right") * **The Image shows the Fixed CSS Positioning property** ## 4.CSS **Absolute Position Property** * Absolute positioning is used to position an element relative to the first parent element that has a position other than static. If no such element is found, the containing block is HTML. * With absolute positioning, you can place an element anywhere on a page. * Absolute positioned elements are removed from the normal flow and can overlap elements. * It behaves based on the parent's position. * ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1679229035162/58850693-84eb-4a4d-965b-0ea14b40ecd3.jpeg align="center") * **The Image shows the Absolute CSS Positioning property.** * **Example:** * %[https://codepen.io/Yashoda11/pen/zYJLXpq] * In this example, the CSS `absolute` property of the position has been used. * After applying CSS `absolute` property, the element is positioned relative to its nearest positioned element. ## 5.CSS **Stickey Position Property** * An element with `position: sticky;` is positioned based on the user's scroll position. * 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). * ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1679229926855/65432a7f-bc70-462b-8e17-99f672d7bca5.png align="center") **EXAMPLE:** * %[https://codepen.io/Yashoda11/pen/RwYBOEJ] ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1679230448477/783aec10-9d26-4d66-b8f9-d63487ebd8ac.jpeg align="center") **The Image shows the Sticky CSS Positioning property** * ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1679230536011/3330f884-3624-42ca-9601-eb60a0a789cb.png align="center") * **The Image shows the full review of the CSS Positioning properties**