How to Position Elements Usng CSS

The position property controls how you wish to position an element. There are five different position methods available, including static, relative, fixed, absolute, and sticky. static is the default positioning method, meaning the element is not positioned in any special way.

Things get more interesting starting from the relative position.

Relative position

With the position set to relative, the element will be placed relative to its default position. It can be adjusted by setting the left, right, top, or bottom properties.

1<div class="static">Static</div>
2<div class="relative">Relative</div>

1.static {
2  position: static;
3}
4
5.relative {
6  position: relative;
7  top: 10px;
8  left: 20px;
9}

Fixed position

fixed position means that the element is positioned relative to the viewport. This method can be useful when you need to create a component, such as a navigation bar, that always stays at the top of the webpage, no matter the user's scrolling position. Or when you need a pop-up window that stays at the bottom right corner.

1<div class="fixed">Fixed</div>

1.fixed {
2  position: fixed;
3  bottom: 10px;
4  right: 10px;
5}

1<div class="relative">
2  Relative
3  <div class="absolute">Absolute</div>
4</div>

1.absolute {
2  position: absolute;
3  right: 20px;
4  bottom: 20px;
5}

1<p>Lorem ipsum. . .</p>
2
3<p>. . .</p>
4
5<div class="sticky">Sticky</div>
6
7<p>. . .</p>

1.sticky {
2  position: sticky;
3  top: 10px;
4
5  border: solid orange 2px;
6  background-color: bisque;
7  width: 100%;
8  height: 100px;
9}