Best tips for css positioning.

In this article, we will explain the CSS position property, a property that will help you move elements around different areas in your website, there are different types of this property, and the different ways you can make use of their values.

-Introduction to positioning

-Static Positioning

-Absolute Positioning

-Relative Positioning

-Fixed Positioning

-Sticky Positioning

Conclusion.

INTRODUCTION TO CSS POSITIONING.

In CSS, to position elements means to display them where and how you want on a web page. The CSS position property is used to define where and how elements are placed. The property works alongside the top, right, bottom, and left properties.

The CSS position property can take one of these five different values:

1. Static

2. Relative

3. Absolute

4. Fixed

5. Sticky

We will discuss them one after the other.

Static

This is the default value for HTML elements, elements with this position are positioned according to the normal flow of the webpage. The top, right, bottom, left and the Z-index have no effect on elements with this position.

The example below helps to show how adding position: static and top: 20px to the second div changes nothing.

<div class="div1"> One</div>
<div class="div2">Two</div>
<div class="div3">Three</div>

div{
margin:15px;
border-radius:10px;
width:80px;
height:80px;
color:white;
text-align: center;
padding:10px;
}
.div1{
background-color:blue;
}
.div2{
position:static;
background-color:red;
}
.div3{
background-color:green;
}

Relative

Elements with position:relative follow the normal flow of the page but will move relative to its initial positioning. A top property pushes the element downwards while a left property moves it to the right side. position: relative doesn't affect other elements, it only moves the element with the property and leaves space of its initial position.

.div2{
position:relative;
background-color:red;
left:10px;
top:10px
}

Below is how relative positioning worked on the red box, pushing it downwards and towards the right as explained above.

Absolute

When you assign position: absolute to elements, they move permanently from the normal flow, acting like they never existed in their initial positioning. Elements with this position need a closest ancestor or parent container that is positioned relatively, else they will be positioned relative to the browser.

.div2{
position:absolute;
background-color:red;
left:10px;
top:10px
}

Fixed

Assigning fixed position to elements places them relative to the viewport and they stay put as you scroll, they don't move with other elements. this is how it differs from absolute positioning which places element relative to the nearest ancestor, everything else is the same.

.div2{
position:fixed;
background-color:red;
left:10px;
top:10px
}

Sticky

Element with position: sticky shared the relative and fixed position values and it depends on the scroll position. In other words, it is positioned relatively till a specified position is met in the viewport then it becomes fixed and sticks to the page as you scroll.

.div2{
position:sticky;
background-color:red;
left:10px;
top:10px
}

The example below is how the boxes appear before the specified position is met.

This is how the red box sticks when it gets to the specified position which is the 10px from the top.

In conclusion, understanding these positions in CSS enhances and improves your web development and designing skills, it also makes it easier to control and dictate how elements are displayed.