Position

Published Aug 9, 2021Updated Sep 9, 2021

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, or 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.

All contributors

christian.dinh
Anonymous contributor

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