Want to improve your design skills and improve the user experience on your website? It’s easier with a full understanding of the different CSS methods for positioning elements. You can create an amazing web page with a basic understanding of web design. But the main problem arises when your web project is more detail-oriented, especially if it requires complex alignment of elements on the page.

Fortunately, you can improve the functionality of your site and speed up your workflow by using proper CSS positioning. Let’s explore different CSS positioning properties and take a look at the different layouts you can use to create a modern web page.

What is the position CSS property?

CSS position The property defines the position of an element. You can manipulate the location of an element with left, law, High, low, and z-index Properties. Although you can use CSS Flexbox or CSS Grid to create symmetrical websites, positional properties help you create asymmetric websites by separating each element from other elements.

In other words, the CSS position property allows elements to move freely in a document.

The syntax of the CSS position property is:

position: value;

Here are the five values ​​that the position property can take:

1. static

2. relative

3. absolute

4. fixed

5. tights

NOTE: You can position elements using the left, right, top, and bottom properties. But these properties behave differently, depending on the place value.

CSS static positioning

Static is the default position for HTML elements. Let’s look at some HTML examples to figure it out:

Child 01

Child 02

Child 03

We have placed three children in a parent container. We will use this example to play with the different position properties. Here’s the basic CSS that each of our examples will use:

.utility-flex {
display: flex;
justify-content: center;
align-items: center;
}
.parent_container {
background: rgb(255, 187, 98);
padding: 10px;
width: 600px;
height: 400px;
}
.child_1,
.child_2,
.child_3 {
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-weight: 600;
background: #e961ee;
border: 5px solid rgb(255, 255, 255);
width: 300px;
height: 100px;
color: rgb(238, 238, 238);
border-radius: 5px;
margin: 5px;
}

Now let’s add position: static to the second child with the bottom and right properties.

.child_2 {
position: static;
bottom: 40px;
right: 50px;
border: 8px solid purple;
}

Here is the result :

As you can see the border property applies but there is no difference in the positioning of the second child. If you do not apply a CSS position property, the default will be static. This positions an element according to the standard page flow. Any element with a static position will ignore the left, right, top, bottom, and z-index properties.

CSS relative positioning

When you apply relative positioning, an element will initially behave the same as for static positioning. But now the left, right, top, bottom and z-index properties will work by moving the selected element from its original position in the specified direction.

Let’s change the position value of the second child from static to relative with the same top and bottom properties as before.

.child_2 {
position: relative;
bottom: 40px;
right: 50px;
border: 8px solid purple;
}

Here is the result :

As you can see, the second child is offset 40px from the bottom (up) and 50px from the right (to the left).

Absolute CSS positioning

Any element with absolute positioning is removed from the normal flow of the document. The other elements will behave as if this element does not exist in the document. The final position of the element is determined by the top, bottom, left, and right properties.

Note that an element with absolute positioning is positioned relative to its nearest positioned (non-static) ancestor. If there is no ancestor positioned, it is positioned relative to the initial containing block.

Let’s understand this with the help of two examples. First, a child in absolute position without a positioned ancestor:

.parent_container {
background: rgb(255, 187, 98);
padding: 10px;
width: 600px;
height: 400px;
margin: auto;
}
.child_2 {
position: absolute;
bottom: 190px;
right: 500px;
border: 8px solid purple;
}

Here is the result :

In this second example, the parent container has a non-static position:

.parent_container {
background: rgb(255, 187, 98);
padding: 10px;
width: 600px;
height: 400px;
margin: auto;
position: relative;
}
.child_2 {
position: absolute;
bottom: 20px;
right: 150px;
border: 8px solid purple;
}

The child is now positioned in relation to its container:

CSS fixed positioning

An element with a fixed position is also removed from the normal flow of the document. There is no space created for this element throughout the layout. It is positioned relative to the initial container block defined by the window (except when one of its ancestors has a filter, transform, or perspective property set to a value other than none). The top, left, right and bottom properties will decide the final position of the element.

Let’s adjust our existing example by adding more children. Previously, we fixed the height of the parent container. Let’s remove it and set flex-direction: column so that our flex container is large enough to scroll down and see the result. Now add the fixed position property to the second child as shown below:

.utility-flex {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.parent_container {
background: rgb(255, 187, 98);
padding: 10px;
width: 600px;
/* height: 400px; */
margin: auto;
/* position: relative; */
}
.child_2 {
position: fixed;
bottom: 300px;
right: 100px;
border: 8px solid purple;
}

Here is the result :

Scrolling therefore does not affect the position of the second child at all. Its position is fixed with respect to the initial container block defined by the window. Sometimes scrolling items can cause performance and accessibility issues. You can create an accessible website using semantic HTML and CSS.

Sticky CSS positioning

An element with sticky positioning has mixed relative and fixed positioning properties. A sticky positioned element will follow the relative positioning properties until it crosses the specified threshold. After that, it will behave as if it is fixed, until it reaches its parent’s limit.

You can specify the threshold using the left, right, top, and bottom properties. Without a threshold, the element will behave as if it had a relative positioning.

Let’s set the second position of the child on sticky with an upper threshold:

.child_2 {
position: sticky;
top: 0px;
border: 8px solid purple;
}

Here is the result :

As you can see, the second child behaves like the other children when scrolling. But when it reaches the threshold value (high: 0px), it behaves as if it is fixed and exits the normal document flow. You can make a navigation bar stick to the header with sticky positioning.

Conclusion

The CSS position property is an advanced web design skill. It takes some learning, but all you have to do is play around with different values, results, and exceptions. Remember, nothing can beat practice when it comes to creating an awesome web design. So keep practicing and you will get better. Good coding!

Read more

About the Author