Skip to main content
Practice

Positioning

The position property determines how an HTML element is positioned in a web page.


Static Positioning​

static is the default positioning for all elements.

If you don't specify a position, the elements are automatically placed in their original order.

Example of using the static property
.box {
  position: static;
}

Relative Positioning​

relative moves an element relative to its original position.

For instance, the CSS box class below moves the element with the class 20px to the left and 10px up.

Example of using the relative property
.box {
  position: relative;
  left: 20px;
  top: 10px;
}

Absolute Positioning​

absolute positions an element relative to its nearest positioned ancestor that isn't static.

If no such ancestor exists, it will be positioned relative to the body of the web page.

Example of using the absolute property
.box {
  position: absolute;
  top: 50px;
  right: 30px;
}

Fixed Positioning​

fixed keeps an element fixed in place relative to the browser window.

This is commonly used for floating buttons or navigation bars that remain visible as you scroll through a page.

Example of using the fixed property
.box {
  position: fixed;
  bottom: 10px;
  left: 10px;
}

Sticky Positioning​

sticky allows an element to shift relative to the scroll position until it reaches a specified point, then it becomes fixed in place.

This technique is often used to keep a table header or sidebar content in view.

CSS
.box {
  position: sticky;
  top: 0;
}

Follow the highlighted portions in the code to practice.

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.