Complete guide to CSS positions: Element layout in CSS

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.

The 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 position & helper properties
• Position: static
• Position: relative
• Position: absolute
• Position: fixed
• Position: sticky
• Z-index
• What to learn next

Learn how to build websites from scratch

The perfect place to start your front-end journey. This path teaches everything you need to know about HTML, CSS, and JavaScript.

Become a Front End Developer

CSS position & helper properties#

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:

• static
• relative
• absolute
• fixed
• sticky

First, we set the position property. Then, the coordinates of an element is positioned using helper properties:

• top
• bottom
• left
• right
• z-index

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#

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#

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.

Important! Unlike 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 top, right, bottom, and left.

Let’s look at another example. Here, we will arrange elements on a horizontal line using position:relative.

Here we adjust all three images along a horizontal line. For Astro_Girl, we are setting top:0px and left:0px so that it remains in its original position.

For 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.

For 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.

Position: absolute#

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 top, right, bottom, and left.

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.

The Astro_Boy uses 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 position:absolute for Astro_Girl like before. But this time, we set the helper properties for Astro_Boy using 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 top:-10px and left:-10px.

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.

For 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 Astro_Cartoon and Astro_Boy.

Position: fixed#

An element under position:fixed is also removed from the normal document flow. It is positioned relative to the viewport. The top, right, bottom, and left properties are used for these values.

There are two main differences between fixed and absolute:

• In position:fixed, all the elements are placed relative to the <html> document even if it has a parent class.
• The elements are not affected by scrolling. They stay in their exact position even if we scroll the page.

Note: A fixed element will not leave a gap in the page.

Here, Astro_Girl and Astro_Boy have top:50px, but Astro_Girl is set with position:fixed. This element is placed relative to the <html> element.

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_Girl and Astro_Cartoon will stay on the screen.

Position: sticky#

position:sticky can be explained as a mixture of position:relative and position:fixed. At declaration, it acts like position:relative, but when scrolling, it acts like position:fixed.

In other words, elements set with position:sticky are 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.

Z-index#

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.

Note: z-index does not work with position:static.

Let’s look at a few examples to understand this better. First, see what happens if we don’t specify the value of z-index.

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 z-index values.

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.

Note: You can download all the files from this tutorial on Google Drive or GitHub.

What to learn next#

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:

• clip property
• overflow property
• float and clear properties
• Horizontal and vertical align
• CSS combinators

To help jumpstart your front-end journey, Educative has created a streamlined learning path called Become a Front End Developer. These curated modules walk you through everything you need to know about HTML, CSS, and JavaScript.

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.

Happy learning!

Continue reading about CSS#

• CSS Flexbox Tutorial: how to use flexbox properties
• CSS Selector Cheat Sheet: Top selectors for front-end development
• Animate CSS code: create a panda animation with HTML & CSS