CSS POSITION PROPERTY

In this article we are going to talk about CSS position property. This property basically helps you adjust the positioning of an element, making it a little bit easier to design your page. The position property has five different values: Static, absolute, fixed, relative and sticky. When you set position to one of these values you can manipulate the element’s position with the “top”, “bottom”, “right” and “left” properties.

Five values of CSS position property.

STATIC

Let’s start with the default value of the position property which is “static”. There is not much to talk about this value. Static value is a default value for almost all elements and sets the elements according to the normal flow of the page. Elements with static position are not affected by the top,bottom,left and right properties. So there is not much use of this value unless you need to remove some positioning that got applied to an element out of your control.

Let’s have a div element added to our page.

<div class="box1"></div> <!-- a div element with a class "box1" to form a box for visual-->

Then let’s look at the class we assigned to the div element.

.box1{ /*to create a class named box1*/
height: 200px; 
width: 200px;
background-color: blue;
}

The display of these code blocks will be as…

200x200 blue box (div element)

As you can see the box positioned normally and we did not assigned a value for its position, for the reason static is a default value and elements positioned originally according to this value.

RELATIVE

Relative position value is the most confusing among others. So let’s start with what will happen when you set “position: relative”. Well if you just set position to relative and do not change the top, bottom, left and right properties, it will do the same thing as “position: static”. The element will be added according to the normal flow of the page. However, if you do change one of the positioning properties, the element will shift the amount you entered from where it would be originally. An example may make this more clear.

So here we will add another div element with different color.

<div class="box1"></div> <!-- a div element with a class "box1" to form a box for visual-->
<div class="box2"></div> <!-- a div element with a class "box2" to form a box for visual-->

And the CSS code of the box2 class.

.box2{ /*to create a class named box2*/
height: 200px;
width: 200px;
background-color: red; /*We changed the color for difference*/
position: relative; /*Here we set position to relative*/
/*As you can see there is no positioning property(top,bottom,left or right(*/
}

And this is the outcome…

Box2 is set normally according to the flow.

Here our second div element is set as its position is relative, since we have not given any positioning property. (Originally you would get two boxes one under the other, but I put these two div elements in an inclusive div element which has a display property set to flex.)

Now let’s see what will happen when we give top property. All we have to do is to add a top property to our box2 class.

.box2{
height: 200px;
width: 200px;
background-color: red;
position: relative;
top: 100px; /*We add top property to shift the red box down by 100px.*/
}

Now we get…

Red box shifted 100px down

As you can see the red box shifted down by 100px. The red box moved down by 100px relative to it self. When you use relative on an element and give a positioning property the element will change its position relative to its original position.

ABSOLUTE

This one is a bit different then others, however if you can use right it will be a powerful tool at disposal. Now, let me first explain why this value is different then others. Absolute is different then other values because elements with position set to it are removed from the flow of the page. This means that these elements do not affect other elements as well as other elements affect them. But also elements with absolute positioning are relative to the next parent element if there is. Otherwise they are relative to the page itself.

Let’s move on with another example. We are going to add a third box and it will be without a parent element.

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div> <!-- Third div element to form a box -->

Now let’s set the CSS code.

.box3{
height: 200px;
width: 200px;
background-color: black;
position: absolute; /* Now we just set the position to absolute without any positioning property.*/
}

And we get…

See the black box ? It is right on top of blue one…

Now we get a black box on top of a blue box, however it is not because the blue box is the parent of the black box it is because since we have not given a parent element the third box is positioned relative to the page itself. Now remember the blue box has the static position and positioned accordingly. Same thing for the black box but the only difference is that the black box is positioned absolute.

Now let’s see what happens when we give some top and left property. CSS is below.

.box3{
height: 200px;
width: 200px;
background-color: black;
position: absolute;
top: 50px;/* Shift down 50px*/
left: 50px; /* Shift it to the right 50px*/
}

Outcome…

Black box shifted down and right by 50px.

Now we did the same thing as we did with the element position set to relative. We gave some top and left property to position the box as we desire. The box moved itself relative to the page. We can place this box anywhere on the page in the location we want it to, however we should be careful while doing this because we can also limit the flexibility of our page if we ever overuse it.

This is absolute positioning, however I would like to show you this also with a parent element.

<div class="box1"></div>
<div class="box2">
<div class="box3"></div> <!-- Third div element in the second div, making the second element its parent-->
</div>

CSS code is the same.

.box3{
height: 200px;
width: 200px;
background-color: black;
position: absolute;
}

Now let’s see what we got…

Now black box is positioned relative to its parent

Well now the third box is on top of the second box and this is because the third one is positioned relative to the second. As I told before the second box is the parent of the third, so when positioned the third box is positioned relative to the second.

If you want you can also manipulate the third box. CSS is below.

.box3{
height: 200px;
width: 200px;
background-color: black;
position: absolute;
top: 100px;
left: 100px;
}

What we got here is…

Manipulated third box

FIXED

Fixed value is similar to the absolute, this one is also removed from the flow and can be positioned anywhere on the page relative to the page itself. The small difference is that this element is fixed to the page, which means that if you scroll down it will also come down with you, it stays right at the position. This is used for navigation bars mostly, when you scroll down the page and the menu of the page also comes down with you.

Now I can’t really show a fixed element in this article but I trust that you will try it on your own, don’t worry I’ll provide the code.

HTML code

<div class="box1"></div>
<div class="box2">
<div class="box3"></div>
</div>
<div class="box4"></div> <!-- Box 4-->

CSS code

.box4{
height: 200px;
width: 200px;
background-color: green;
position: fixed; /* To fix the element according to the below 
properties*/
bottom: 0; /* set bottom to zero, fix it to the bottom of the page*/
left: 0; /* set left to zero, fix it to the left of the page*/
}

Outcome…

Green box is fixed to the bottom-left

This is what you should get as an outcome and if you add some more elements to the page so you can scroll down, you will see that the green box is fixed.

STICKY

Elements with a position set to sticky acts as both relative and fixed. Meaning that until a specified point this element will act as relative positioned element but when it reaches that specified point it will act as a fixed element.

.box5{
height: 200px;
width: 200px;
position: -webkit-sticky;
position: sticky;
top: 0;
background-color:orangered;
}

Also the HTML code.

<div class="box5"></div> <!-- New box -->
<div>
<p>lorem*20</p> <!-- Some long text for us to be able to scroll down-->
</div>

If you add some text to your page for scrolling (write “lorem*20”, then hit enter to have a long text), you will see that when you scroll down this box will reach its scroll position (top:0) and then fix itself to the page (sticks).

If you also apply this you should get this…

This is the initial look

And after you scroll down you should get…

This is when you scroll down

See, the box sticks to the position where we told it should stick.

This value is supported by latest versions of Firefox browsers and Safari browsers, also partially supported by Chrome and Opera. For more detailed information please check out the link below.

Can I use... Support tables for HTML5, CSS3, etc

Well, that is all for this article. We covered the most used position values in CSS to make your web designs a bit less challenging. CSS may seem hard but once you get to it and try a lot you start to learn how to use it, as I learned more about the position property while writing this article…

Sources:

1. https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
2. https://www.w3schools.com/css/css_positioning.asp
3. https://developer.mozilla.org/en-US/docs/Web/CSS/position
4. https://css-tricks.com/almanac/properties/p/position/
5. https://caniuse.com/?search=position%3Asticky