Understanding CSS Positioning

The CSS position property is one of those things that has been around for quite sometime, it is necessary to learn if you are goin to be working on the web. CSS allows us use different methods to position elements. This article will give us a better understanding on CSS positioning, in this article we will learn about the various of the CSS position property and how to move elements based on its top, bottom ,right, and left positions, any CSS unit of measurement can work (em, px, etc). You need to understand HTML and the basics of CSS.

What is CSS position property?
The CSS position property is used to position an element in a document, it allows us to define where element boxes are going to be on the web page. The CSS position property is used to position an element in a document, it allows us to define where element boxes are going to be on the web page relative to their usual starting position or relative to their parent elements.

The five main values the position property can take are;

Static positioning
Relative positioning
Absolute positioning
Fixed positioning
Sticky positioning

Let's discus,

Static positioning

Position:static is the automatically applied property, static elements cannot be moved, it means that the element follows the normal document flow. They are not affected by the top, bottom, right and left properties. It is the default positioning
value.

Let's use an example to illustrate;

HTML

‹div class="parents">
    ‹div class="divs">
    <div class="One">Div One</div>
    ‹div class="Two">Div Two</div>
    <div class="Three >Div Three</div>
    ‹div class="four ›Div Four</div>
    </div>
    </div>

CSS

 div.two{
     position:static;
     top:50px;
    }

The result.

You will notice there is no change, which confirms that the top, bottom, left and right properties do not affect an element in position static.

Relative Positioning
It takes the element from the original position and moves it to any position you want it to be, it lets you change an elements position, to change the position you need to apply the top, bottom, right, and left properties and specify where you want to move the element. Elements are not removed from the normal document flow, It is positioned according to it's original position.

Example.

HTML

 <div class=”box”>
     <div class=”item”></div>
     <div class=”item”></div>
    </div>

CSS

.box{
     width: 400px;
     height: 400px;
     border: 5px solid black;
     margin:20px auto;
    }
    .item1,.item2{
     width: 150px;
     height: 150px;
    }

    .item1{
      background-color: #508AA8;
      position: relative;
      left: 20px;
    }
    .item2{
      background-color: #6F1A07;
    }

The result.

In relative positioning nothing happens until we use one of the offset properties(top, bottom, left and right) to offset it.

The Positive values move the element away from the name side but negative values move the element to the name direction.

Absolute positioning
In this position the elements are removed from the normal document flow. It is not positioned according to elements original position, absolute positioning are positioned differently from relative elements, they are positioned according to the nearest containing elements, the containing element or the nearest parent element that has a position. Their is always a parent element that comes into play with absolute positioning. It's final position is determined by the top, bottom, right, and left values.

For example;

HTML

<div class=”box”>
     <div class=”item”></div>
     <div class=”item”></div>
    </div>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
    reprehenderit in voluptate velit esse cillum dolore eu
    fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
    anim id est laborum.</p>

CSS

.box{
     width: 400px;
     height: 400px;
     border: 5px solid black;
     margin:20px auto;
    }
    .item1,.item2{
     width: 150px;
     height: 150px;
    }

    .item1{
      background-color: #508AA8;
      position: absolute;
      bottom:0px;
    }
    .item2{
      background-color: #6F1A07;
    }

The result.

If you want this position relative to the box all you have to do is add position:relative to our box.

For example.
HTML

 <div class=”box”>
     <div class=”item”></div>
     <div class=”item”></div>
    </div>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
    reprehenderit in voluptate velit esse cillum dolore eu
    fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
    anim id est laborum.</p>

CSS

 .box{
     width: 400px;
     height: 400px;
     border: 5px solid black;
     margin:20px auto;
     position: relative;
    }
    .item1,.item2{
     width: 150px;
     height: 150px;
    }

    .item1{
      background-color: #508AA8;
      position: absolute;
      bottom:0px;
    }
    .item2{
      background-color: #6F1A07;
    }

The result.

Fixed positioning
The elements are also removed from the normal document flow. It is always fixed according to the viewport what is visible on the screen), it work's basically the same way absolute positioning works except the parent element is always the viewport. Even if the page is scrolled they stay exactly at the same position. It guarantees you it's always going to be there.

Example.

HTML

<div class=”box”>
     <div class=”item”></div>
     <div class=”item”></div>
    </div>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
    reprehenderit in voluptate velit esse cillum dolore eu
    fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
    anim id est laborum.</p>

CSS

.box{
     width: 400px;
     height: 400px;
     border: 5px solid black;
     margin:20px auto;
     position: relative;
    }
    .item1,.item2{
     width: 150px;
     height: 150px;
    }

    .item1{
      background-color: #508AA8;
      position: fixed;
      left: 50px;
    }
    .item2{
      background-color: #6F1A07;
    }

The result.

The box is fixed, it is always going to be stuck to our viewport.

Sticky Positioning
Position:sticky is used to position the elements based on the scroll position of the user. It is the containing element, it is similar to absolute positioning but only where certain conditions are met then it acts like fixed positioning. Sticky positioning is not supported in all web browsers.

For example.

<h1>My Website</h1>
    <h1>Cool</h1>

    <nav>
     <ul>
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
     </ul>
    </nav>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
    reprehenderit in voluptate velit esse cillum dolore eu
    fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
    anim id est laborum.</p>

CSS

nav{
     background-color: #6F1A07;
     color: white;
     position: sticky;
     top: 0;
    }

    p{
     width: 30%;
    }

The result.

In the example above we notice that, the home, about and contact, are stuck to the top, it is going to switch between static positioning and fixed positioning.

Blog

Understanding CSS Positioning

Chisom🦄

Join Our Newsletter. No Spam, Only the good stuff.

Related