CSS Position: The Beginners Guide

Css positions can help you to manipulate the location of an element.

CSS positions have six possible values and after placing any of these six values you can arrange the element with top, right bottom and left.

Values of CSS Position

These are the six values of CSS Position:

• Static: every element has the default position value and that is Static. It allows elements to stick to the normal flow of the page. You can’t arrange the left, right, bottom, or z-index in this value.

• Relative: this is the same as static and it behaves from his parent but now you can apply left, right, bottom, and z-index in this value

• Absolute: this allows the element to get out from the web page and behave by its values left, right, bottom, and z-index in this value.

• Fixed: this is almost the same as an absolute and it is always relative to the document not to any particular parent, and it is unable to scroll.

• Sticky: this is almost the same as a relative until the scroll location of the viewport reaches the specific threshold, and it takes fixed positions where it is told to be stuck.

To apply any of the values all you need to do is just apply position to any of these values. Here is the code example.

HTML Code

<div class="container">
  <div class="box box-one"></div>
  <div class="box box-two"></div>
  <div class="box box-three"></div>
  <div class="box box-four"></div>
  <div class="box box-five"></div>
</div>

<div class="text">
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi veritatis quasi molestiae voluptatibus assumenda, eum consequuntur aliquid nemo dolore voluptates illo. Excepturi ullam ea earum eligendi. Illo unde voluptates quaerat debitis molestias recusandae. Praesentium, velit fugiat? Quae facere totam ad atque explicabo tempora? Excepturi similique dolor tempora iste, molestias ut voluptate! Molestiae, enim quas? Voluptas officia unde eveniet nisi odio, vel quo sapiente dolor sequi, et odit? Odit aperiam nostrum minus. Laboriosam nam molestias quae, voluptatibus optio quia iure libero aspernatur beatae cupiditate corporis exercitationem nihil veniam dignissimos praesentium ipsam distinctio incidunt deserunt consequuntur, aliquid est? Praesentium atque temporibus reprehenderit necessitatibus odit pariatur cupiditate vel, et ipsum adipisci! Corrupti, illum doloribus odit harum accusantium dicta deleniti provident minus libero ipsum facilis omnis molestias! Deleniti esse necessitatibus laborum! Doloremque eos perferendis saepe id quidem voluptate quod beatae distinctio pariatur sit! Odio distinctio iure perferendis aperiam reiciendis! Ullam quasi, aliquid quaerat est nemo corporis neque. Consequuntur, dolores ullam magni dolor non vero suscipit, vel molestiae veritatis recusandae eos quasi nemo illum minus quos quidem autem quia fugit perferendis ab neque! Asperiores est fuga eius nobis autem, officia rem voluptas dignissimos corporis in! Voluptatum repellendus officia sunt sint quod sit cupiditate inventore commodi?</p>
</div>

CSS code

.container {
  width: 100vw;
  height: 100vh;
  background-color: #cfcfcf;
  display: flex;
}

.box {
  width: 50px;
  height: 50px;
  background-color: #000000;
  margin: 5px;
}

/* The default Static value */

.box-one {
  position: static;
}

/* relative value: now their locition can be affected by top, right, bottom, left vlues */

.box-two {
  position: relative;
  top: 10px;
}

/* the absolute value: this is emoved from the normal flow, and can overlap elements.  */

.box-three {
  position: absolute;
  right: 10px; 
  /* see how it goes to right of the page */
}

/* the fixed vlue allow to to fix the position any element to the page */

.box-four {
  position: fixed;
  bottom: -2px;
}

/* this ibehave like a reltive untill it reches to the specified threshold, and it takes a fixed position where it is told to stick.  */

.box-five {
  position: sticky;
  top: 202px; 
  /* see how to takes fixed position when   we reches to 202 px from top */
}

Conclusion

So I hope this article has helped you to understand the basics of the Position of CSS.