CSS layout position property

Guide to use CSS Layout position property with examples

Positioning your elements in a webpage using CSS position property can be a bit troublesome if you don’t know how to use them properly. It’s important to understand the basics of the position property before using them on your webpage.

In this article, we are going to learn about various CSS position properties and their values. This article will help you understand how the position properties work and when you should use them.

Let’s begin!

What is CSS position property?

It is a CSS layout technique used to position an element on a web page. It allows us to take an element from the normal flow layout and position the element wherever we want it to be.

Note: Normal flow or flow layout is the default display of a page element before any changes are made to their layout.

The position property takes five values. They are:

  1. Static
  2. Relative
  3. Absolute
  4. Fixed
  5. Sticky

 

Let’s learn about them one by one.

Static

It is the default position value for HTML elements and will not affect anything. When we use position: static it places the elements according to the normal flow of the document. The properties left, right, top, bottom, and z-index will not affect the elements using position static.
 
Let us use an example to show how the position: static does not affect the position of an element.

If you notice, you will see that there is no change in the static element even after giving it property left and top. This proves that the left and top property doesn’t work with position: static.

Relative

Elements using the property position relative remains within the normal flow of the webpage. But unlike static, we can use the left, right, top, bottom, and z-index properties to position the element in the webpage.

Now, let’s use an example with position: relative to see how it works.

.div2 {
    border: 2px solid #40ff93;
    background-color: #40ff93;
    position: relative;
    left: 20px;
    top: 19px;
}

Now notice that the left and top properties now affect the position of the relatively positioned element and the element stays in the normal flow of the document. 

Let’s move on to the next value

Absolute

The absolute value position the element by default relative to its closest ancestor/parent element. If a parent element has been given a position value then it will be positioned in that context.

It removes the element from the document’s normal flow and the other elements will act as if the element doesn’t exist. The left, top, bottom and right properties determine the final position of the element.

Note: Since it is positioned relative to its closest parent element, the parent must have a position value other than static.

In case the parent element doesn’t have the position value, it is positioned relative to the element.

Let’s check this out with an example

If you look closely, the div with class ‘div3’ is positioned absolute and is inside a parent div with class “container”. But the container class doesn’t have the position property, so the absolute element is positioned relative to the ‘<body>’ element.

Now let’s add the position property (position: relative) to the container class and see what happens.

notice how the absolute element is now positioned relative to the div with the class container.

Fixed

An element with position: fixed is positioned relative to the viewport. The element is removed from the normal flow of the document and placed on the viewport. The left, top, bottom and right properties determine the final position of the element.

It is similar to the position absolute except they are always positioned relative to the element. They’re not affected by scrolling so it always stays in the same place even if the page is scrolled.

Now the final value

Sticky

Very few people use position: sticky. It is a mix of relative and fixed, it acts like a relatively positioned element until a scroll point, and then it sticks like a fixed positioned element. For sticky positioning to work You must also specify at least one of the top, right, bottom, or left properties.

Note: Internet Explorer doesn’t support position: sticky and safari require a -webkit- prefix.

Let us see through an example

That’s it! I hope this article helped you get a better understanding of the CSS position property and its values. So now go ahead and use this property in your website or personal project like a CSS pro.

And if you liked this article very much don’t forget to share it with your friends and help them become a pro in CSS just like you.

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.