{"id":25065,"date":"2022-11-24T02:44:26","date_gmt":"2022-11-24T10:44:26","guid":{"rendered":"https:\/\/coderpad.io\/?p=25065"},"modified":"2023-06-05T13:49:37","modified_gmt":"2023-06-05T20:49:37","slug":"understanding-the-css-position-property-and-how-it-works-with-example","status":"publish","type":"post","link":"https:\/\/coderpad.io\/blog\/development\/understanding-the-css-position-property-and-how-it-works-with-example\/","title":{"rendered":"Understanding the CSS Position Property and How It Works With Example"},"content":{"rendered":"\n

When using HTML to build web pages, elements are arranged after each other vertically by default. You will always want to add styling to either change your page’s layout or organize its elements so that elements can be positioned horizontally on your screen. This is possible with CSS flexbox<\/code><\/a> and CSS grid<\/code><\/a>. However, more is needed to create stunning web pages.<\/p>\n\n\n\n

The CSS position property fills in the blanks by allowing you to create an asymmetrical web page where you can place HTML elements wherever you want by detaching each element from the normal flow and other elements, making your web page more appealing and easy to navigate.<\/p>\n\n\n\n

In this article, you will learn what the CSS position property means, how it works, the various values and how they can help you properly position items on your webpage.<\/p>\n\n\n\n

What is the CSS position property?<\/h2>\n\n\n\n

As the name implies, the CSS position<\/code> property is used to position an element on a web page. It specifies and lets you take an element from your web page’s normal flow layout and position it wherever you want it to be using other CSS properties like top<\/code>, right<\/code>, bottom<\/code>, and left<\/code>.<\/p>\n\n\n\n

The position property has five values that perform different functions, all aimed at helping you position elements. This article will explain how these values work and their differences, making it easy for you to know where and when to use a particular value. <\/p>\n\n\n\n

CSS position values<\/h2>\n\n\n\n

Here are the five CSS position values:<\/p>\n\n\n\n

1. static<\/code><\/p>\n\n\n\n

2. relative<\/code><\/p>\n\n\n\n

3. absolute<\/code><\/p>\n\n\n\n

4. fixed<\/code><\/p>\n\n\n\n

5. sticky<\/code><\/p>\n\n\n

selector<\/span> {\n  position<\/span>: static | relative | absolute | fixed | sticky;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
To get started, let’s make use of a parent div with five div<\/code> elements and a paragraph to identify each div<\/code>:<\/p>\n\n\n
<div<\/span> class<\/span>=\"parent-container\"<\/span>><\/span>\n  <div<\/span> class<\/span>=\"div-item container1\"<\/span>><\/span>\n      <p<\/span>><\/span>This is container One<\/p<\/span>><\/span>\n  <\/div<\/span>><\/span>\n  <div<\/span> class<\/span>=\"div-item container2\"<\/span>><\/span>\n      <p<\/span>><\/span>This is container Two<\/p<\/span>><\/span>\n  <\/div<\/span>><\/span>\n  <div<\/span> class<\/span>=\"div-item container3\"<\/span>><\/span>\n      <p<\/span>><\/span>This is container Three<\/p<\/span>><\/span>\n  <\/div<\/span>><\/span>\n  <div<\/span> class<\/span>=\"div-item container4\"<\/span>><\/span>\n      <p<\/span>><\/span>This is container Four<\/p<\/span>><\/span>\n  <\/div<\/span>><\/span>\n  <div<\/span> class<\/span>=\"div-item container5\"<\/span>><\/span>\n      <p<\/span>><\/span>This is container Five<\/p<\/span>><\/span>\n  <\/div<\/span>><\/span>\n<\/div<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Let’s style these divs to look like this.<\/p>\n\n\n\n
\"\"\/
Five divs with the text This is container One to Four<\/strong> styled in different colors.<\/figcaption><\/figure>\n\n\n\n
CSS static position<\/h3>\n\n\n\n
The CSS static<\/code> position is the default value for the position<\/code> property. It is the position HTML elements have by default. This position<\/code> value means that an element will follow based on the normal flow of the page and will follow the standard positioning rules as expected with or without any CSS styling.<\/p>\n\n\n\n
This means when you do not apply the position<\/code> property to an element, it is static<\/code>, meaning most elements you work with are statically positioned. They are not affected by the top<\/code>, right<\/code>, bottom<\/code>, left<\/code>, and z-index<\/code> properties.<\/p>\n\n\n\n
In the example below, a position of static<\/code> is applied to the second div<\/code> container, but you will notice that it does not affect the element’s output.<\/p>\n\n\n
.container2<\/span> {\n  background-color<\/span>: #7f0df4<\/span>;\n  position<\/span>: static;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
\"\"\/
Five blocks of This is container<\/strong> in a static position.<\/figcaption><\/figure>\n\n\n\n
Nothing is exciting about this position value, but it is worth knowing that it exists \ud83d\ude42. Let’s explore other position values that change an element’s position from the default position.<\/p>\n\n\n\n
CSS relative position<\/h3>\n\n\n\n
The CSS relative<\/code> position is used to position an element according to the normal flow of the webpage. This position value alone does nothing. For example, if you apply the position of relative<\/code> to the third div<\/code> container.<\/p>\n\n\n
.container3<\/span> {\n  background-color<\/span>: #ce4dcd<\/span>;\n  position<\/span>: relative;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
There will be no change to the element and the entire elements in the web page because It works just like the static<\/code> value with more advantages.<\/p>\n\n\n\n
\"\"\/
The relative position alone does not affect how each element is displayed.<\/figcaption><\/figure>\n\n\n\n
The advantage of using this property is that it gives you access to directional properties that you can use to move any element without affecting the offset position of the relative<\/code> positioned element. These directional properties include top<\/code>, left<\/code>, right<\/code>, bottom<\/code>, and z-index<\/code>. For example, you can move the element down and towards the right with the top<\/code> and left<\/code> properties.<\/p>\n\n\n
.container3<\/span> {\n  background-color<\/span>: #ce4dcd<\/span>;\n  position<\/span>: relative;\n  top<\/span>: 50px<\/span>;\n  left<\/span>: 40px<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
\"\"\/
The This is container Three<\/strong> is overlapped on the This is container Four<\/strong> block.<\/figcaption><\/figure>\n\n\n\n
You’ll notice that the offset does not affect the surrounding elements because the space the element initially occupies is left empty. At this point, you can begin to ask yourself the use of the relative<\/code> position.<\/p>\n\n\n\n
Surprisingly, it is not particularly useful because you want to avoid a situation in which other elements are unaffected. This position value can be used to set the z-index<\/code> or specify the stack order of an element, or it can be used as a container for an “absolutely” positioned element.<\/p>\n\n\n\n
For example, in the preceding example, the third element is stacked on top of the fourth. Adding z-index<\/code> alone to the fourth element will have no effect, but adding a relative position will allow you to stack the element on top of the third.<\/p>\n\n\n
.container4<\/span> {\n  background-color<\/span>: #ef74ff<\/span>;\n  position<\/span>: relative;\n  z-index<\/span>: 1<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
\"\"\/
Elements are stacked on each order as a result of the z-index<\/code> property.<\/figcaption><\/figure>\n\n\n\n
CSS absolute position<\/h3>\n\n\n\n
The absolute<\/code> position is used to remove an element from the normal flow of a web page and then position it relative to the element’s nearest positioned ancestor (any element with a position value that is not static<\/code>).<\/p>\n\n\n\n
When an element has an absolute position, the elements around it act as if that element does not exist on the web page. Depending on how the elements were previously arranged, the element stays on top of one another and collapses the available space.<\/p>\n\n\n
.container2<\/span> {\n  background-color<\/span>: #7f0df4<\/span>;\n  position<\/span>: absolute;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
\"\"\/
The absolute<\/code> position value causes the third element to take the place of the second.<\/figcaption><\/figure>\n\n\n\n
In the preceding example, the third element takes the place of the second element, leaving the second element to linger. You’ll also notice that the element is no longer the full width. This is because absolute<\/code> positioned elements have the width set to auto<\/code>.<\/p>\n\n\n\n
The absolutely defined element can now be positioned using directional properties such as top<\/code>, left<\/code>, right<\/code>, and bottom<\/code>. It is also important to understand that this element will be positioned closest to the ancestor. This means that the parent container should be relative to serve as a positioned ancestor.<\/p>\n\n\n
.parent-container<\/span> {\n  \/\/ ...\n  background-color<\/span>: #ddd<\/span>;\n  border<\/span>: 2px<\/span> solid #000<\/span>;\n  position<\/span>: relative;\n}\n\n.container2<\/span> {\n  background-color<\/span>: #7f0df4<\/span>;\n  position<\/span>: absolute;\n  top<\/span>: 0<\/span>;\n  left<\/span>: 0<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
\"\"\/
The first element is affected by the top<\/code> and left<\/code> properties.<\/figcaption><\/figure>\n\n\n\n
Because the top and left positions were set to the starting point, the element is now positioned at the top of the container. You can use this to place an element in the center or at a specific location on your website.<\/p>\n\n\n\n
If the parent container is not set to a relative<\/code> position, the element will be positioned at the top left of the next positioned ancestor, which is now the body of the entire page.<\/p>\n\n\n\n
\"\"\/
This is container Two<\/strong> is moved outside the blocks of elements.<\/figcaption><\/figure>\n\n\n\n
CSS fixed position<\/h3>\n\n\n\n
As the name implies, this fixed position is used to fix an element to a specific position of your web page. It removes an element from the normal flow of the web page and positions it relative to the viewport (the part of the document visible in your browser) rather than the nearest positioned ancestor as absolute.<\/p>\n\n\n
.container4<\/span> {\n  background-color<\/span>: #ef74ff<\/span>;\n  position<\/span>: fixed;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
\"\"\/
The fourth element in the container block is fixed.<\/figcaption><\/figure>\n\n\n\n
You will use directional properties to specify a position you want the element to be positioned.<\/p>\n\n\n
.container4<\/span> {\n  background-color<\/span>: #ef74ff<\/span>;\n  position<\/span>: fixed;\n  top<\/span>: 50%<\/span>;\n  left<\/span>: 0<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
\"\"\/
The fourth container element is fixed and moved outside the parent container.<\/figcaption><\/figure>\n\n\n\n
This is mostly used when you want to move a button to the bottom of your page, such as the scroll up<\/strong> button. You can use the fixed position if you also want to fix the nav bar to the top of the webpage screen.<\/p>\n\n\n\n
When you position an element to be fixed, it will remain in that position even if you scroll through the page, distinguishing it from the absolute position. It also does not leave a blank space as position relative does.<\/p>\n\n\n\n
\"\"\/
A GIF showcasing the fourth container fixed to the page as the parent container is scrolled through.<\/figcaption><\/figure>\n\n\n\n
CSS Sticky Position<\/h3>\n\n\n\n
The sticky position is very superb. It is a combination of static<\/code> and fixed<\/code> positions. This is because an element will remain in the normal flow of the web page as you scroll until it gets to the specified position, then it becomes fixed.<\/p>\n\n\n
.container3<\/span> {\n  background-color<\/span>: #ce4dcd<\/span>;\n  position<\/span>: sticky;\n  top<\/span>: 0<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
In the example above, all elements will scroll normally until the third element reaches the parent element’s top. It then sticks. It behaves like a static element until it gets to a specified position; then, it becomes fixed and appears to stick to that spot.<\/p>\n\n\n\n
\"\"\/
The page moves in an elastic manner once scrolled through.<\/figcaption><\/figure>\n\n\n\n
\n
\u2139\ufe0f For sticky positioning to work, You must specify at least one of the top, right, bottom, or left properties.<\/p>\n<\/blockquote>\n\n\n\n
This is perfect when you have a navbar positioned after your hero section and will like to stick to the top when a user scrolls to the top of the screen. Also, when you have a list of elements with separate headers which you want to stick as the user scrolls, you can achieve this with the sticky position.<\/p>\n\n\n\n
\"\"\/
The illustration displays all position<\/code> property values.<\/figcaption><\/figure>\n\n\n\n
Here is a demo that shows the use of all position values.<\/p>\n\n\n\n\t