DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
ChisomπŸ¦„
ChisomπŸ¦„

Posted on

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>

Enter fullscreen mode Exit fullscreen mode

CSS

 div.two{
     position:static;
     top:50px;
    }
Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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;
    }
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
    }

Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
    }
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
    }
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

CSS

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

    p{
     width: 30%;
    }
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)

DEV has this feature:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›