Introduction

Position properties in CSS is a fantastic CSS feature that allows the moving of HTML elements around an HTML document. Not fully understanding CSS position can be confusing and frustrating as it will seem like all the tags are not obeying your command. Worry no more. At the end of this article, you will learn how to use the CSS position properties like a pro. I will also show you how to use it in a live scenario.

What is the CSS position?

The CSS position property as the name implies is used to set where and how an element is placed or positioned in an HTML document.

The properties of CSS position

The CSS position property can have five values which include:

• Static
• Fixed
• Sticky
• Relative
• Absolute

Alongside these above-listed properties, we will use the following CSS properties.

• top: indicates space at the top of an element.
• bottom: indicates space at the bottom of an element.
• left: indicates space on the left side of an element.
• right: indicates space on the right side of an element.

These four properties are what we will be using to move our element around.

Let's explain one after the other with an example:

What Is Static Position Property in CSS

The static property is the default position for every HTML element. This brings about the default arrangement of elements in the HTML document. For instance, let's create three div tags and set position: static.

You will see that the property static does not affect these divs. This is because it is positioned static by default.

Note: top, bottom, left, right has no effect on element with static position

What Is Fixed Position Property in CSS

The fixed property is used to position an element on the browser screen. The name implies that the element will be fixed to a particular point on the browser screen. With this property, we can use the top, bottom, left, and right to move the element around. By default, top : 0 left: 0 let's look at some examples of how the fixed position works.

Scroll on the screen, and you will see the elements Fixed 1 and Fixed 2 did not leave their respective positions. You will also see the top and left space on Fixed 1 and the bottom and right space on Fixed 2. These results from the top, bottom, left, and right properties added to the elements. Try messing around with the top, bottom, left, and right values and see how it works. With this done, let's move to the next position, property - sticky.

What Is Sticky Position Property in CSS

The sticky property is a combination of static property and fixed property. How do I mean, that the item will remain static until it reaches a particular point where it will become fixed. Here are some examples of how the sticky position works.

As you can see on the screen, each element is positioned accordingly (static). Now scroll on the screen, and you will see that each of the elements keeps scrolling until it gets to a point top: 20px for Sticky 1, top: 50px for Sticky 2, top: 80px for Sticky 3, where they become fixed. Like the fixed position, we can use top, bottom, left, and right to move elements around. With this done, let's move to the next position property, RELATIVE.

What Is Relative Position Property in CSS

The relative property allows the moving of elements around from their initial position. Unlike the fixed position which is related to the screen size, the relative position is relative to its initial position. We can also use top, bottom, left, and right to move elements around. Let's look at examples of how the relative position works.

From the example, you will see that the Relative 1 is moved from its initial position top : 20px and left: 20px without affecting the initial position of the Relative 2.

The relative element is just like a static element that you can move around.

The relative position is usually used with the absolute position. Let's move to the next position property, ABSOLUTE, and see how it is used with position relative.

What Is Absolute Position Property in CSS

The absolute position is usually used alongside the relative position, where the element positioned relative is the parent element, and the element positioned absolute is the child element. The absolute property allows the moving of an element within its relative parent. We can use top, bottom, left, and right to move the absolute element around within its relative parent. Let's look at examples of how the absolute position works.

From the above example you will see that absolute child 1 and absolute child 2 are position in relation to the size of their relative parent Relative parent top: 20px, left: 20px and bottom: 20px, right: 20px respectively.

That is all on CSS Position properties.

What Is Z-Index Position Property in CSS

In addition to the top, bottom, left, and right properties, we also have the z-index. The z-index is used to set the level of an item along the z-axis. It is used to place an element above another. Check out the below example:

From the above, you will see that by default, the elements are placed on each other based on how they are added to the HTML document, but with the use of z-index, we can change the placement. The higher the z-index, the more the element will be above others.

Note: top, bottom, left, right and z-index can also take negative numbers.

That is pretty must all you need to know on CSS position.

CSS position cleansheet

From the above illustration and explanation, I understand that each CSS position property behavior depends on its parent.

• Static : Default
• Fixed : Relative to the screen size
• Sticky : Default until it gets to a point where it becomes relative to the screen size
• Relative : Relative to its default position in the HTML document
• Absolute : Usually used with relative position as its parent container, it is relative to its parent container.

How CSS Position Properties Are Used in Live Demonstration.

The code below will show you how to implement the CSS properties in a live scenario.

Wrapping up

We’ve explored the CSS position properties and how you can use them with examples, don't forget the best way to learn CSS is by implementing.

It's great to see that you have enjoyed the article. If you have any questions, please drop them in the comments section!

Thanks for Reading 🌟🎉

I'd love to connect with you on Twitter.

Happy coding!