CSS Position
Published Aug 9, 2021Updated Jun 4, 2025
Contribute to Docs
Positioning in CSS provides designers and developers options for positioning HTML elements on a web page.
The CSS position can be set to static, relative, absolute, fixed or sticky.
Position
- absolute
- Places an element relative to its nearest positioned ancestor or the browser window.
- bottom
- Specifies the distance of an element from the bottom of the specified position.
- fixed
- Positions an element relative to the viewport, removing it from the document flow and keeping it fixed during page scrolling.
- left
- Specifies the distance of an element from the left of the specified position.
- position
- Defines how elements are placed within the document.
- relative
- Positions an element relative to its normal document flow placement, allowing for improved styling control.
- right
- Specifies the distance of an element from the right of the specified position.
- static
- Positions an element according to the normal flow of the page but not in any special way.
- Sticky
- Defines an element that toggles between relative and fixed positions depending on the scroll position.
- top
- Specifies the distance of an element from the top of the specified position.
- z-index
- Sets the stack order of an element.
Contribute to Docs
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.
Learn CSS on Codecademy
- Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
- Includes 34 Courses
- With Professional Certification
- Beginner Friendly.115 hours
- In this CSS tutorial, you’ll learn how to add CSS to visually transform HTML into eye-catching sites.
- Beginner Friendly.6 hours