Mastering the Position Property in CSS: A Comprehensive Guide

---

In this article, we’ll be talking about the position property in CSS, which is used to control the layout of elements on a webpage.

---

Table of Contents

• Basic Terminologies

• Position Properties

• Bonus Exercise

• Summary

---

Before we dive into the details of the position property in CSS, let’s take a step back and ask ourselves a few questions:

• Why do we need the position property in CSS?

By answering these questions, we’ll be better equipped to understand the position property in CSS and use it effectively in our web design projects. So, let’s get started!

---

Why do we need the position property in CSS?

We need the position property in CSS to control the position of elements on a webpage. Without this property, all elements on a webpage would be positioned according to their default value, which might not be suitable for our design needs.

For example, let’s say you have a website with an image and some text. By default, the image and text would be positioned one after the other, from top to bottom. But what if you wanted the image to be positioned on the left side of the page, and the text to wrap around it? Or what if you wanted the image to be fixed in place while the user scrolls through the text?

In both of these cases, you would need to use the position property in CSS to control the layout and position of these elements on the page. By using the position property, you can specify exactly where an element should be positioned on the page, how it should be positioned relative to other elements, and whether its position should be fixed or relative to the user’s scrolling.

---

To understand what the position property does, it’s helpful to know what a position is in CSS.

Property:

Think of a property in CSS as a set of rules that tells a computer how to display something on a website.

For example, imagine you wanted to change the color of some text on a website from black to blue. You could use the color property in CSS to do that!

h1 {
  color: blue;
}

Position:

The dictionary definition of position is the particular portion of space occupied by something.

When we combine this definition with the term property, we get the position property in CSS.

---

The position property in CSS allows you to specify the particular portion of space occupied by an element on a website. This property tells the computer where to put something on the page/website.

Understood? Yes; now?

Before we discuss the different values of the position property in CSS, let’s first define what a value is in CSS.

---

Value

A value in CSS is a setting that you can apply to a property to control how something looks on a website.

For example, if you use the color property to change the color of some text on a webpage, the value you use would be the actual color you want to apply — like blue or red or green

p {
  color: red;
}

Now, let’s move on to the different values of the position property in CSS.

---

The position Property

The position property specifies where to position the element.

There are five (5) values you can use with the position property:

1. static

2. relative

3. absolute

4. fixed

5. sticky

Syntax:

.element {
  position: static | relative | absolute | fixed | sticky;
}

Note: the symbol (|) is used to indicate that a property can contain specific values.

To position elements on a webpage, the properties top, bottom, left, and right must be used. However, these properties will not take effect unless the position property has been set beforehand. It’s also important to note that their behavior may vary depending on the value assigned to the position property.

I will provide further details about these properties in the following discussion.

Let’s discuss each one of those values.

static:

Setting the value of the position property to static means that the element will be positioned based on its default position in the document flow. Therefore, the top, left, right, and bottom properties have no effect on the element.

---

To provide a simple analogy, imagine a book placed on a shelf in a library. When a book is placed on a shelf, its position is determined by its place in the order of the other books on the shelf. Similarly, a staticelement’s position is determined by its place in the HTML structure.

---

Note: HTML elements are positioned static by default.

Syntax:

.element {
  position: static;
}

Example:

Html:

<html>
  <body>
     <div class="container">
       <h1>Static Position Example</h1>
       <p>This element has position: static;</p>
     </div>
  </body>
<html>

Let’s set the position property of the p element to position: static and add values for the top, left, bottom, and right properties to see if it affects its position. Additionally, we can add some CSS properties to make the changes more visible.

CSS:

p {
  position: static;
  padding: 10px;
  background-color: yellow;
  border: 1px solid black;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

This is the result.

Have you observed that there was no difference? This confirms that when an element has position: static the left, top, right, and bottom properties have no impact. Let’s now proceed to the next value.

Let’s move to the next value.

relative

Setting the value of the position property to relative means it is still positioned according to the document flow, like an static element. However, it can also be moved from its default position using the top, bottom, left, and right properties.

---

Think of a chessboard as a container element, with each square representing a container, and each chess piece representing a child element. When a chess piece is placed on the board, it has a default position based on the square it’s placed on, just like a relatively positioned element has a default position based on its position within its parent container.

Moving a chess piece relative to its original position on the board is similar to moving a child element relative to its current position within its parent container using the top, left, right, and bottom properties. Relatively positioned child elements, like chess pieces on the board, don’t affect the position of other elements on the page.

---

Syntax:

.element {
  position: relative;
}

Example:

See how changing the left property moves the element to a different position, but it still stays in its place on the page. The change is made relative to the element itself, not to other things on the page. Remember this, as we'll learn about other ways to move things around next.

absolute

Setting the value of the position property to absolute means that the element is taken out of its normal place in the page layout and can be positioned anywhere on the page.

When you use position: absolute for an element, it's important to remember that the element will be positioned based on its closest parent element which also has a specific position value set. This helps the element to be in the right spot on the page.

But if the element doesn't have any specific parent element with a position value set, it will be positioned based on the whole page itself.

---

It's like a bird finding a branch to sit on - if there's a sturdy branch nearby, it will land on it, but if there's no branch, it will land on the ground instead.

---

Note: a position: absolute; must be inside a position: relative;

Syntax:

.element {
  position: absolute;
}

Example:

The p element was moved left and top by 50 pixels and also to the right, but this was all done relative to the div element that has the class relative. So, you could say that the p tag moved in relation to its parent element, which was the div with the class relative.

fixed

Setting the value of the position property to fixed removes the element from the normal flow of the document and causes it to remain in the same position on the screen, even if the user scrolls or moves the page.

---

It's like using tape to stick a toy car to the table so that no matter how we move the table, the car stays in the same spot. With position: fixed;, we can stick a part of a webpage (like a picture or a menu) to a certain spot on the screen so that when we scroll or move the page, that part stays in the same place. It can be really helpful to make sure important things are always visible, even when we're looking at a really long webpage!

---

Syntax:

.element {
  position: fixed;
}

Example:

Try scrolling on the result tab to see that the element moves on the screen.

Let's move to the final value.

sticky

position: sticky; combines the concepts of position: relative; and position: fixed;. It behaves as a relatively positioned element until a specific scroll point, at which time it behaves as a fixed element. If you don't understand what this implies, don't worry; the example will help you grasp it better.

---

It's like putting a sticker on a piece of paper that will stay in the same place as you move the paper, but then it will move when you get to a certain spot. With "position: sticky;", we can stick a part of a webpage (like a picture or a menu) to a certain spot on the screen until we scroll to a certain point, and then it will move like normal. It can be really helpful to make sure important things are always visible, but then move out of the way when we're done with them!

---

Example:

To see position: sticky; in action, scroll on the result tab. The element behaves like a relatively positioned element until it reaches a certain point on the screen (in this case, top: 10px), at which point it behaves like a fixed element and remains in place on the screen even as you continue to scroll.

Note: a position: sticky; must be inside a position: relative;

---

Bonus Exercise:

Let's use what we have learnt so far.

Summary

Wow, what a journey it's been! I hope this article has helped you understand the CSS position property and how it works. If you're still unsure about anything, feel free to experiment with the code examples provided. You can change the values and see how they affect the layout, or try using the position property in your own projects.

Remember, becoming proficient in CSS takes ongoing practice and experimentation. So don't be discouraged if you don't get it right away - just keep practicing and you'll improve with time!

---

Don't hesitate to reach out to me on Twitter if you are still having a problem understanding.