Skip to content

Position

The position property in CSS is used to position an element. Every element has position set to static by default. Property position can be set to 5 different values:

  • static
  • relative
  • absolute
  • fixed
  • sticky

Then you use the top, right, bottom and left properties to set how far away from those locations your element is at (example: bottom: 20px or bottom: 5%).

Static

position: static is the default behavior for all elements. Elements positioned this way are not being affected at all by the top, right, bottom and left properties.

Example HTML:

HTML
<div>I am staticly positioned by default.</div>

Relative

position: relative can be used to position a div relative to it's normal position. Properties top, right, bottom and left can be used to position a relative element.

If you are also using absolute positioned element(s), you need to set the main container first relative in order to position the absolutely positioned element(s).

Example HTML:

HTML
<div class="relative-top-left">I am relatively positioned.</div>

Example CSS:

CSS
.relative-top-left {
  position: relative;
}

Absolute

position: absolute can be used to position an element relatively to the closest parent relatively positioned element (or <body> if no parent element is relatively positioned).

Position of the absolutely positioned element can once again be changed using the top, right, bottom and left properties.

Absolute positioned elements are great to for example position a image on some corner of your section.

Example HTML:

HTML
<div class="relative-container">
  <p>Hello World!</p>
  <button class="close-button">X</button>
</div>

Example CSS:

CSS
.relative-container {
  position: relative;
  text-align: center;
  width: 100%;
  border: 1px solid black;
  height: 150px;
}

.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
}

Fixed

Elements with the position: relative property are always fixed to the given position on your screen. This is super helpful for example to create navigation or footer section that always stays on the screen, even though when you scroll down or up the page.

Example HTML (navigation always on top):

HTML
<div id="main-nav">
  <a href="#">Front</a>
  <a href="#">About</a>
</div>

Example CSS:

CSS
#main-nav {
  position: fixed;
  top: 0px;
  left: 0px;
  background: black;
  color: white;
  width: 100%;
  text-align: center;
  padding: 15px;
}
#main-nav a {
  color: white;
  margin: 10px;
}

Sticky

Elements with the position: sticky property are positioned based on the user's scroll position. This property is much more newer than the 4 mentioned above and less frequently used. You can learn more about this property and a good example from here.

z-index

When two elements overlap each another (for example absolutely positioned image with another section) the one with bigger z-index will be visible (on top of other elements). You can set the z-index for elements like this:

CSS
.my-element {
  z-index: 4; /* Bigger this number more visible it will be. */
}