Applying CSS Positioning Properties
Tags: css
Published: 2023-01-11 16:31:13

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/csspositionproperty_0f78273793e3918dd872670f22199887.jpg" alt="Applying CSS Positioning Properties."/></figure>

CSS positioning properties enhance the user experience on your page. Also, they allow you to position elements and contents on a web page differently. In this article, you’ll learn what CSS positioning properties are, the different CSS position property values, and how you can apply them to your web page.

## What is the Position Property in CSS?

The CSS position property describes the type of positioning method used for an element and its placement on a web page. It helps you explicitly set a location, allowing you to move your elements around on the page. In addition, you can use the top, left, right, and bottom properties to give the document any look you want. For example, properties can place elements at the edge of the parent element or the viewport edge when the value of 0 is applied.

## Why Use CSS Positioning?

We use positioning properties in CSS for many reasons:

- To enhance your design skills and improve the user experience on your page
- To specify where an element is displayed on the page
- To give the [design layout a compelling visual appeal](https://code.pieces.app/blog/using-css-flexbox-in-building-layouts)
- To enable you to exploit a component's location, allowing you to move your piece around the page
- To make your design more accessible and understandable
- To let you determine the final area of the element


## How to Use Position Property in CSS

Before diving into this topic, you should realize that even without CSS, your HTML element already has predefined rules on how it should be displayed on a web page. Therefore, it’s important to understand how things are positioned by default before changing or bending them at will. Also, bear in mind that all HTML elements are static by default. Here is how the CSS positioning property works:

- The position property in CSS helps specify elements' positions on a web page.
- Whether it will appear within the normal flow of a document or not all depends on the order.
- The CSS positioning property works with the box offset properties `left`, `right`, `top`, and `bottom`, which describe the final position of elements by moving them in different directions.
- Depending on your CSS position property values, the box offset properties must be placed first for the CSS position properties to work.


## CSS Positioning Property Values

The CSS positioning property has several values that influence how it works. These include the following:

### Static Position

[Static positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/position) exists in the normal flow of the page and rejects any box offset property; it is a default position. However, the `top`, `bottom`, `left`, and `right` properties do not affect it. Note that an element with static positioning does not have a unique position. Instead, it is always set according to the normal flow of the page.

All HTML elements are static by default. Using this position, you cannot change the placement of elements on a page.

Let’s look at this example of a single `div` element with a static position:

**Example:**

```
<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      background-color: #73AD21;
    }

    .box {
      width: 400px;
      height: 200px;
      background-color: white;
    }
  </style>
</head>

<body>
  <div class="box"></div>

</body>

</html>
```

[Save this code](https://user-96a93fbe-468f-4504-b52f-78e91ab5ec81-agyqaaz4hq-uc.a.run.app/?p=871f4db05c)

Here is the result of the above code:

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image11_7a56ddfed6d62ccb6073434483d766eb.png" alt="White rectangle in the upper left corner of a large green rectangle."/></figure>

Now, let's try to move it around with the left property:

```
 .box {
      width: 400px;
      height: 200px;
      background-color: white;
      position: static;
      left: 70px;
    }
```

[Save this code](https://user-96a93fbe-468f-4504-b52f-78e91ab5ec81-agyqaaz4hq-uc.a.run.app/?p=4b4f468499)

Here is the result of the above:

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image11_246d95e27620e14f55e4fa18d722c9cb.png" alt="White rectangle in the upper left corner of a larger green rectangle."/></figure>

Notice that there is no difference in the image. Static positioning is not affected by the `top`, `bottom`, `left`, and `right` properties.

### CSS Relative Position

[Relative position](https://developer.mozilla.org/en-US/docs/Web/CSS/position#:~:text=A%2520relatively%2520positioned%2520element%2520is,properties%2520specify%2520the%2520horizontal%2520offset.) is an element relative to its normal position on the page. However, the setting of a relatively-positioned element's `top`, `right`, `bottom`, and `left` properties affect its normal page position. However, any space left by the relative element will not allow any content to adjust to fit. This is because the gap bounds them in the document. Therefore, when the element with a relative position moves, no part of anything else is influenced on the screen. Still, it is as if the element kept its position on the screen and everything else flows around it as if it had never moved.

Note that changing the position property does nothing. It only starts doing something when you use one of the coordinating properties. Therefore, you set the movement values using `top`, `bottom`, `left`, and `right` to cancel the box close to the current position of the element you are moving. It's essential to note that the movement of the components works opposite of the order given and not the direction of the movement set. For example:

- Set the positive value for the `left` property to move an element to the right.
- Set the positive value for the `right` property to move an element to the left.
- Set the positive value for the `bottom` property to move an element up.
- Set the positive value for the `top` property to move an element down.


We’ll be centering the parent element in order to explain relative positioning. With this, it’s easier to understand the movement of what we will be doing:

```
<!DOCTYPE html>
<html>

<head>
  <style>
    .parent {
      background-color: #73AD21;
      border: solid 3px blue;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 500px;
    }

    .box1 {
      width: 200px;
      height: 100px;
      background-color: white;
    }

    .box2 {
      width: 200px;
      height: 100px;
      background-color: yellow;
    }

    .box3 {
      width: 200px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>

<body>
  <div class="parent">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>


</body>

</html>
```

[Save this code](https://user-96a93fbe-468f-4504-b52f-78e91ab5ec81-agyqaaz4hq-uc.a.run.app/?p=0e5d47ac0b)

Here is the result:

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image12_c720d43eca90a247c1df32b730937796.png" alt="White, yellow, and red rectangles in the center of a larger green rectangle."/></figure>

Now, let’s add the position property CSS relative to our code to move the box around:

```
<!DOCTYPE html>
<html>

<head>
  <style>
    .parent {
      background-color: #73AD21;
      border: solid 3px blue;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 500px;
    }

    .box1 {
      width: 200px;
      height: 100px;
      background-color: white;
      position: relative;
    }

    .box2 {
      width: 200px;
      height: 100px;
      background-color: yellow;
      position: relative;
    }

    .box3 {
      width: 200px;
      height: 100px;
      background-color: red;
      position: relative;
    }
  </style>
</head>

<body>
  <div class="parent">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>


</body>

</html>
```

[Save this code](https://user-96a93fbe-468f-4504-b52f-78e91ab5ec81-agyqaaz4hq-uc.a.run.app/?p=6e784f8759)

Here is the outcome:

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image9_215669f96df219354d9fc04ce7e44456.png" alt="White, yellow, and red rectangles in the middle of a larger green rectangle."/></figure>

Observe that nothing changes. This is because the position property relative does nothing to the elements. You can effect change by adding any coordinating properties: left, right, top and bottom.

Next, let's move the element (`box1`) to the left and bottom:

```
 .box1 {
      width: 200px;
      height: 100px;
      background-color: white;
      position: relative;
      right: 250px;
      top: 90px;
    }
```

[Save this code](https://user-96a93fbe-468f-4504-b52f-78e91ab5ec81-agyqaaz4hq-uc.a.run.app/?p=295345984b)

Let's look at the result to better understand how to set the value of the properties:

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image13_830fbba71d13e9fbe69f0b6fb248d0f7.png" alt="A white rectangle in the lower left corner and yellow and red rectangles in the middle of a larger green rectangle."/></figure>

Notice that to move the element to the left, you need to set the value to the right; to move it to the bottom, you set it to the top. Also, it is as if the element kept its position on the screen.

Now, let’s move the element (`box2`) to the right and top:

```
.box2 {
      width: 200px;
      height: 100px;
      background-color: yellow;
      position: relative;
      left: 100px;
      bottom: 70px;
    }
```

[Save this code](https://user-96a93fbe-468f-4504-b52f-78e91ab5ec81-agyqaaz4hq-uc.a.run.app/?p=21cb459ba7)

Here is the result:

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image3_6e2d3b4cb762604d73b6050d92a6a96f.png" alt="Three rectangles in the middle of a larger green rectangle. Two of the rectangles overlap."/></figure>

Remember that the value was set to left to enable the element to move right; to move it to the top, you set it to the bottom. In addition, the movement of the element did not push down or influence the other elements on the screen.

### Absolute Position

[Absolute position](https://developer.mozilla.org/en-US/docs/Web/CSS/position#:~:text=An%2520absolutely%2520positioned%2520element%2520is,which%2520the%2520element%2520is%2520positioned.)) is an element with its position relative to its parent element. In this case, you remove the element from the normal document flow and do not create any gap for it in the page layout. Instead, the `left`, `top`, `bottom` and `right` values determine the element's final position.

Note that an absolute positioned element uses the document body and moves along with page scrolling. In addition, if it has no positioned ancestors, it can overlap.

For better understanding, we’ll work with these elements to explain how absolute positioning works:

```
<!DOCTYPE html>
<html>

<head>
  <style>
  body{
    background-color: #73AD21;
  }
    .container {
      background-color: red;
      border: solid 3px blue;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 500px;
      height: 400px;
      position: relative;
    }

    .box1 {
      width: 200px;
      height: 100px;
      background-color: white;
    }
    .box2 {
      width: 200px;
      height: 100px;
      background-color: yellow;

    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
  </div>


</body>

</html>
```

[Save this code](https://user-96a93fbe-468f-4504-b52f-78e91ab5ec81-agyqaaz4hq-uc.a.run.app/?p=d98f48bcad)

Here is the outcome:

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image2_944cb9e5c4effdd38c508128c838be79.png" alt="A red square inside a green rectangle. White and yellow rectangles in the middle of the red square."/></figure>

Now, we’ll move the box. As mentioned earlier, that absolute position is an element with its position relative to its parent element.

Let’s move `box1` to the left 50px from the parent element and down 40px from the parent element: 

```
 .box1 {
      width: 200px;
      height: 100px;
      background-color: white;
      position: absolute;
      left: 50px;
      top: 40px;
    }
```

[Save this code](https://user-96a93fbe-468f-4504-b52f-78e91ab5ec81-agyqaaz4hq-uc.a.run.app/?p=bd784dab70)

Here is the result:

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image5_d099265ddb211095c803d0d8b53f6dcb.png" alt="White and yellow rectangles in the upper left corner of a red square in a green rectangle."/></figure>

Notice that the element was taken out of the document's normal flow, unlike the relative positioning, which leaves a space for a ghost element.

Next, let’s move the `box1` element to the left of 50px and the top margin of 0 relative to its parent element:

```
.box1 {
      width: 200px;
      height: 100px;
      background-color: white;
      position: absolute;
      left: 50px;
      top: 0;
    }
```

[Save this code](https://user-96a93fbe-468f-4504-b52f-78e91ab5ec81-agyqaaz4hq-uc.a.run.app/?p=50ee41a237)

Here is the outcome:

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image14_13adc1871909c9407051417329aa4511.png" alt="White and yellow rectangles in a red square in a green rectangle."/></figure>

The above image shows how `box1` is positioned relative to its parent element.

Now, let’s move the `box2` element to the right 50px from the parent element, and down 40px from the parent element:

```
.box2 {
      width: 200px;
      height: 100px;
      background-color: yellow;
      position: absolute;
      right: 50px;
      bottom: 40px;
    }
```

[Save this code](https://user-96a93fbe-468f-4504-b52f-78e91ab5ec81-agyqaaz4hq-uc.a.run.app/?p=3905459324)

Here is the effect of the code:

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image1_606b7319294f035c5e74c600c2d0fd2c.png" alt="White and yellow rectangles in the lower right corner of a red square inside a green rectangle."/></figure>

Notice that the element affects the flow on the page. Also, the coordinating properties work as rendered, unlike relative positioning, where you have to set `right` to move left.

Next, let’s move the `box2` element to the right 50px and to the bottom margin of 0 relative to its parent element:

```
.box2 {
      width: 200px;
      height: 100px;
      background-color: yellow;
      position: absolute;
      right: 50px;
      bottom: 0;
    }
```

[Save this code](https://user-96a93fbe-468f-4504-b52f-78e91ab5ec81-agyqaaz4hq-uc.a.run.app/?p=8297449705)

Here is the result:

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image8_7672ee93047287793f7e822601999029.png" alt="White and yellow rectangles in a red square in a green rectangle."/></figure>

This shows that `box2` element is positioned relative to its parent element, which has a bottom margin of 0.

### Fixed Position

An element with [a fixed position](https://www.w3.org/wiki/CSS_absolute_and_fixed_positioning?source=post_page#:~:text=Fixed%2520positioning%2520is%2520really%2520just,position%2520inside%2520the%2520browser%2520window.) is similar to an absolute element. This position is relative to the viewport, showing that it always remains in the same position even when you scroll through the page. When you see a fixed element on a page, it does not leave a gap. For example, the properties `top`, `right`, `left`, and `bottom` work as position elements. Note that fixed elements are not affected by scrolling; instead, they are in the same position on the screen.

We’ll use this image to explain the fixed position, white element and yellow element before we scroll down:

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image10_d8bdc65195f7b16ab0f023798d1f8bc1.png" alt="White and yellow squares on top of red text."/></figure>

Now, let’s use two box elements to explain the fixed position. To do this, we’ll set the `box1` (white) element as the absolute position and the `box2` (yellow) element as the fixed position:

```
<style>
  body{
    background-color: #73AD21;
  }
    .container {
      background-color: red;
      border: solid 3px blue;
      display: flex;
      overflow: scroll;
      align-items: center;
      justify-content: center;
      width: 500px;
      height: 400px;
      position: relative;
    }

    .box1 {
      width: 100px;
      height: 100px;
      background-color: white;
      position: absolute;
      left: 50px;
    }
    .box2 {
      width: 100px;
      height: 100px;
      background-color: yellow;
      position: fixed;
  }
  </style>
```

[Save this code](https://user-96a93fbe-468f-4504-b52f-78e91ab5ec81-agyqaaz4hq-uc.a.run.app/?p=464a4f8dc0)

Here is the result:

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image7_c21d580cf1dec47521cb4ef2884fc30b.png" alt="White and yellow squares on top of red text."/></figure>

Notice that the `box2` (yellow) element was not affected by the scrolling, rather, it remains fixed in the same position on the screen.

### Sticky Position

[A sticky position](https://blog.hubspot.com/website/css-position-sticky) occurs when an element is positioned based on the user's scroll position. The sticky position combines the relative and fixed positions, depending on the part of the scroll. In this way, it acts like a relatively positioned element. In addition, it maintains a relative position until a given offset position is met in the viewport, and then it "sticks" in place like a fixed position.

Let’s look at this example for a better understanding of how the sticky position works:

```
<style>
  .container {
    background-color: grey;
    border: solid 3px blue;
    width: 600px;
    height: 400px;
    overflow: scroll;
  }

.sticky {
  background-color: white;
  width: 100px;
  height: 100px;
  position: sticky;
  top:0;
}
</style>
```

[Save this code](https://user-96a93fbe-468f-4504-b52f-78e91ab5ec81-agyqaaz4hq-uc.a.run.app/?p=af3c48b4dc)

Below are the results of the element before and after we scroll.

The image before the scrolling:

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image6_83218c1e92a976b9367436571dec9c79.png" alt="A white square between two paragraphs."/></figure>

The image after scrolling:

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image4_08ce271e0d5934e9215c5f9ed769d42b.png" alt="The white square is now in the upper left corner of the rectangle."/></figure>

Notice that the white element maintained a relative position until it met the specified top scroll position of `top:0`. Then, it acts as a fixed position element and sticks to the specified spot.

## Conclusion

The CSS positioning properties give structure to your designs and make reviewing the content on a web page more accessible. So, be intentional with CSS positioning, and the results will blow your mind! However, mastering CSS takes regular practice. Keep honing your skills, and you’ll get better at it in time. Learn more about CSS positioning properties such as [CSS float and clear](https://code.pieces.app/blog/fundamentals-of-the-css-float-and-clear-properties), or [how to style text in CSS](https://code.pieces.app/blog/styling-text-in-css) on your site.