When building a webpage, there can be multiple elements on our page, each with their own positions, uses, and designs. It’s important to learn how we can arrange these elements and have control over their layout.
position property in CSS determines how an element is positioned in a document. It specifies the type of positioning method for each element.
In this tutorial, we will learn about the different position properties in CSS along with their helper properties. Along the way, I’ll show you how to use them in your own CSS code as you build your site.
We will learn:
CSS is how we determine the layout and design of a webpage. The CSS
position is how we position each element in a document. This property is a single keyword, and we attach a value to it to set the specific position of an element.
There are five main values for the position property. We will define these in detail below:
First, we set the position property. Then, the coordinates of an element is positioned using helper properties:
Before we go into these, let’s have a look at what happens if we don’t assign a position property to an element.
In the above code, we can see that we have 3 different images. But in the CSS file, we have not assigned any position properties for any element.
The images are adjusted on a vertical line, which is the default when no position property is assigned. There is also a small margin on the top and left side. That is the default 10px margin provided by the HTML element.
As we can see, there will be no gaps between the elements if we don’t provide it externally. In the CSS file, we’ve provided the margin-bottom of 10px that helps us keep a gap between the images.
So, why do we need position property?
Without setting positions, the right side of the webpage is wasted, and we cannot organize the elements. The position property allows us to use the whole webpage and organize any element how we see fit.
Now let’s take a deep dive into each of values and helper properties that we can use in our CSS code.
Enjoying the article? Scroll down to sign up for our free, bi-monthly newsletter.
position:static is the default value provided by HTML. If we don’t assign any position property to the elements, it will use
position:static by default, like in the example above.
With this value, an element is positioned according to the flow of the document, and the helper properties have no effect. This means that if we want to move elements,
static is of no use.
Let’s understand this better with an example.
Here we can see that the output is exactly the same as before where no position properties were assigned. All the elements will be positioned according to the normal flow of the document.
position:relative sets the new position of an element relative to the normal position. In other words, an element is positioned according to the normal flow of the document, and then it is offset relative to itself based on the values we define.
The elements in any document are arranged in a “normal position” if we don’t provide any position property to it. Using the
position:relative, we can arrange the element according to its normal position.
static, we can move the element using the helper properties.
Let’s look at an example to understand this better.
In the output, we can clearly see that the elements are moved relative to its original positions based on the values of
Let’s look at another example. Here, we will arrange elements on a horizontal line using
Here we adjust all three images along a horizontal line. For
Astro_Girl, we are setting
left:0px so that it remains in its original position.
Astro_Cartoon, have to set the
top:-200px to get it back on the first line. And to display in its horizontal line, we move it
200px from the left using
left:200px. But to keep a space of
10px, we’ll move it
210px from the left.
Astro_Boy, we set
top:-400px to get it back on the first line. We use the same logic to keep it in the horizontal line. To keep a space of
10px, like before, we move it
420px from the left.
An element using
position: absolute is positioned relative to the nearest ancestor. In other words, an element with
position:absolute is positioned relative to its parent element.
If an element doesn’t have a parent element, it’s placed relative to its initial containing block. It can then be positioned by the values of
Note: If we don’t specify helper properties, it’s positioned automatically to the starting point (top-left corner) of it’s parent element.
An element with
position:absolute is removed from the normal document flow. This means that other elements in the document will act like the element with
position:absolute doesn’t exist.
Let’s understand this better with the following examples.
In the output, we can see only the
Astro_Girl image since this element has the
position:absolute property. It will be thrown out of the normal document flow. All the other elements will act like the element doesn’t exist.
position:static, so it is set according to the normal document flow. Since
Astro_Girl is not a part of document flow, our webpage considers
Astro_Boy as the first element.
It is set to the normal position for the first element (top-left corner), but the
Astro_Girl element will hide it under itself, so we can only see this element.
Let’s learn how to reveal the other element using CSS helper properties.
Above, we set the
Astro_Girl like before. But this time, we set the helper properties for
left:400px. This means that it will appear
400px away from the top-left corner.
At this point, we can see that there is a default margin of
10px, but we can remove it if we want to. In the example below, we have removed the top and left margin of
10px by setting
Note: Since our elements don’t have a parent element, it is be arranged according to the HTML.
Let’s look at one more example of
position: absolute to understand it better, this time, using parent elements.
In this example, we use a parent element. If there is a parent element, all its children elements will be placed relative to it. Here, we used the simple example of the orange box as the parent element.
Astro_Girl, we set the
position:absolute alongside the properties
top:50px and the
left:100px. It is placed relative to the parent element. The same is the case for the
Learn front-end development without scrubbing through videos or documentation. Educative’s text-based learning paths are easy to skim and feature live coding environments, making learning quick and efficient.
An element under
position:fixed is also removed from the normal document flow. It is positioned relative to the viewport. The
left properties are used for these values.
There are two main differences between
position:fixed, all the elements are placed relative to the
<html>document even if it has a parent class.
Note: A fixed element will not leave a gap in the page.
Astro_Girl is set with
position:fixed. This element is placed relative to the
Astro_Boy is set with
position:absolute, so it is placed relative to its parent class (the orange box). If we scroll the page,
Astro_Cartoon will stay on the screen.
position:sticky can be explained as a mixture of
position:fixed. At declaration, it acts like
position:relative, but when scrolling, it acts like
In other words, elements set with
position:stickyare positioned based on the user’s scroll position.
A sticky element toggles between relative and fixed, depending on the position of the scroll. It is relative until an offset position is met in the viewport.
Let’s understand this better using an example. Below, notice the changes in position when you scroll the output window. The element with a
sticky position will stick to its original position after scrolling.
Now you should have a solid understanding of how CSS values work for positioning elements. Before we wrap up, let’s better understand
z-index, which is useful for building out webpage design.
While placing our elements on a webpage, there will be some cases in which elements overlap. By default, the newer element will appear on top, which can mess up our design.
When that happens, we can use
z-index to specify which element should be on top of the others. In other words, the
z-index specifies the stack order of our elements. This is common for positioning text over an image.
An element can have a positive or negative stack order. An element with higher stack order will appear in front of an element with a lower stack order.
z-indexdoes not work with
Let’s look at a few examples to understand this better. First, see what happens if we don’t specify the value of
In the output, we can see that the elements are displayed in order of their arrival, so the last element will be on top. Now, let’s fix it.
In case of two elements, we can specify
z-index:-1 for the element we want on the bottom.
In the output, we can clearly see that the element with
z-index:-1 is placed under the first element.
Next, let’s use
z-index to arrange the elements how we want. In this example, we will see will arrange the lower z-index elements to stay below the element with a higher z-index.
In the output, we can see that the order in which the elements are arranged is altered. The first element is on the top, while the last element is in the bottom. We arranged these elements using
Lastly, let’s try an example where we use a very high
z-index number to ensure that an element always stays on the top of the other elements.
Here, the element with
z-index:999 stays on top of the other element with lower or default z-index value.
Congrats! You now know how to use CSS positions to organize the layout of your webpage. This is a powerful tool that is the foundation of your front-end knowledge. But there is still more to learn. Next, you should look into:
By the end, you’ll be able to building beautiful, functional websites and web apps. The skills you gain in this path will give you a valuable leg up on your journey.
Join a community of 500,000 monthly readers. A free, bi-monthly email with a roundup of Educative's top articles and coding tips.