position
Published Jul 14, 2021Updated Dec 23, 2023
Contribute to Docs
The position property defines how elements are placed within the document.
Syntax
position: <value>;
where <value>
can be one of the following:
static
: This is the default value of the position property. The element stays in the flow of the document and appears in the actual location where it’s located in the markup.relative
: The element does not change positions unless one or several properties of top, right, bottom, or left are declared. It also creates a reference position for absolute positioned child elements.absolute
: The element is removed from the document flow and it’s positioned in relation to its closest relative positioned ancestor element.fixed
: The element is removed from the document flow just like the absolute positioned elements. However, unlike the absolute positioned elements, which are relative to an ancestor element, the fixed elements are always relative to the document.sticky
: This value is a mix between the relative and fixed positions. The element is treated as relative until a specific point or threshold is met, at which point the element is then treated as fixed.
Example 1
The following example features three .box
elements with different position
values:
.box1 {height: 100px;width: 100px;background-color: red;position: sticky;top: 30px;}.box2 {height: 100px;width: 100px;background-color: blue;position: fixed;top: 80px;}.box3 {height: 100px;width: 100px;background-color: green;position: relative;top: 80px;}
Here’s what the above examples look like:
The first box is sticky to the top of the document. The second is set to a fixed position 40px from the top of the page. The third box position is 80px from the element’s top edge.
Example 2
Position the .box
element 40px
from the bottom of the .ancestor
element.
<div class="ancestor"><div class="box"></div></div>
.ancestor {position: relative;}.box {height: 100px;width: 100px;background-color: blue;position: absolute;bottom: 40px;}
The above example gives the following output:
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
- Career path
Front-End Engineer
Front-end engineers work closely with designers to make websites beautiful, functional, and fast.Includes 34 CoursesWith Professional CertificationBeginner Friendly115 hours - Career path
Full-Stack Engineer
A full-stack engineer can get a project done from start to finish, back-end to front-end.Includes 51 CoursesWith Professional CertificationBeginner Friendly150 hours - Free course
Learn CSS
In this CSS tutorial, you’ll learn how to add CSS to visually transform HTML into eye-catching sites.Beginner Friendly6 hours