The CSS position property can manipulate the location of an element on a page or the container. There are five values associated with the position property which are static, relative, fixed, absolute and sticky. Here in this tutorial, we will be discussing how to set the position of an element using these five values.
<Note> The left, right, top and bottom properties work only if the position property is defined.
CSS position property static value
By default, all the elements position property has a static value. The browser does not locate the element to a specific position if it has a static value. The elements will be rendered normally like the position property for the element is not specified.
Example
<html>
<head>
<style type="text/css">
p{
border: 2px solid black;
position: static;
}
</style>
</head>
<body>
<p>This is a Normal Paragraph with static positioning.</p>
</body>
</html>
Preview:
This is a Normal Paragraph with static positioning.
CSS position property relative value
Normally if we only set the position to the relative value, then we will not see any changes in the element position. To see the changes, we also need to specify the top, bottom, right and left property. These properties shift the element location from its normal position. The relative value works along with the left, right, bottom and top properties and specify the position of the elements relative to its normal position.
Example
<HTML>
<head>
<style type="text/css">
p{
border: 2px solid black;
position: relative;
left: 80px
}
</style>
</head>
<body>
<p>
This paragraph will be shifted 80px away from its normal left position
</p>
</body>
</html>
Preview
This paragraph will be shifted 80px away from its normal left position.
CSS position property fixed value
The fixed property set an element fixed on the browser viewport, so even if the user scrolls up or down the page, the element will be displayed on the user browser. This position value comes useful when we want to create a scroll top or bottom button and navbars.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p{
position: fixed;
bottom: 0;
right: 0;
max-width: 300px;
border: 3px solid black;
}
</style>
</head>
<body>
<p>THIS IS A FIXED PARAGRAPH!</p>
<p> LOOK AT BOTTOM RIGHT</p>
</body>
</html>
Preview:
THIS IS A FIXED PARAGRAPH!
LOOK AT BOTTOM RIGHT
CSS position property absolute value
The absolute value set the element positioning relative to its parent element positioning, unlike fixed element which specify the element positioning according to the page document. If the element does not have an ancestor with a relative position then it will use the document body.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p{
position: absolute;
bottom: 0;
right: 0;
max-width: 300px;
border: 3px solid black;
}
</style>
</head>
<body>
<p style="">This paragraph postion value is absolute</p>
</body>
</html>
CSS position property sticky value
The position property sticky value mange its tasks between the fixed and relative values. The sticky follow the relative value until the offset position value is met, else it follows the fixed value.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
border: 2px solid black;
}
</style>
</head>
<body>
<p>Many browsers does not support sticky value</p>
<p class="sticky">STICKY!</div>
<p>Normal Paragraph 1.</p>
<p>Normal pragrpah 2.</p>
<p>Normal Pargraph 3</p>
<p>Normal Paragrah 4</p>
</body>
</html>
Summary:
- Position property can manipulate the position of an element within the webpage.
- It can accepts 5 values, static, relative, fixed, absolute, and sticky.
- By default all elemets have static position value.
- The relative set the element position relative to its normal positioning.
- The absolute position set the element position according to the ancestor position.
- The fixed position fixes the element position on the page view-port.