Skip to main content

CSS Position: Control Element Placement and Create Dynamic Layouts

The position property in CSS allows you to position an element on the web page.

There are several values for the position property that you can use to control the placement of an element. such as static, relative, absolute, fixed, and sticky.

Now let's take a look at each of these values in more detail.

The position: static Property​

This is the default value for the position property, and it means that the element is positioned according to the normal flow of the page.

As an example:

Editor

Loading...

In this example:

  • The .container element has a width of 800px and is centered on the page using margin: 0 auto.
  • The position property for the .container element is not defined, so it defaults to static.
  • This means that the element is positioned according to the normal flow of the page, and it will appear in the order it appears in the HTML markup.
  • The h1 and p elements inside the container also have their position property set to static by default, so they are positioned according to the normal flow of the page as well.
  • In this case, there is no need to define the position property since static is the default value.

The position: relative Property​

The relative value positions the element relative to its normal position in the page flow.

You can use the top, bottom, left, and right properties to move the element around.

As an example:

Editor

Loading...

In this example:

  • The .container element is the same as in the previous example.
  • The .box element, however, has its position property set to relative.
  • This means that the element is positioned relative to its normal position in the page flow.
  • We've also added a few more styles to the .box element, including a background color, padding, and margin.
  • The h2 and p elements inside the .box element are also styled differently than in the previous example.
  • Since the .box element has a position of relative, we can use the top, bottom, left, and right properties to move it around.

For example, we could add the following styles to move the box 10 pixels to the right and 20 pixels down:

.box {
  position: relative;
  background-color: #eee;
  padding: 20px;
  margin-bottom: 20px;
  top: 20px;
  left: 10px;
}
  • This would move the .box element down by 20 pixels and to the right by 10 pixels, relative to its normal position in the page flow.

The position: absolute Property​

This value positions the element relative to its closest positioned ancestor. If no positioned ancestor is found, the element is positioned relative to the body element. You can use the top, bottom, left, and right properties to position the element exactly where you want it.

As an example:

Editor

Loading...

In this example:

  • The .container element is the same as in the previous examples, but we've added position: relative to it.
  • This is important because the .box element will be positioned relative to the .container element.
  • The .box element has its position property set to absolute, which means it is positioned relative to its closest positioned ancestor element.
  • In this case, the closest ancestor element with a position value other than static is the .container element, which has a position of relative.

The position: fixed Property​

The position: fixed value positions the element relative to the viewport.

It means that the element will stay in the same position on the screen even when the user scrolls down the page.

As an example:

Editor

Loading...

In this example:

  • We have a header section at the top of the page and a content section below it.
  • We've applied position: fixed to the header section, which means it will stay in the same position on the screen even when the user scrolls down the page.
  • We've also set the top, left, and width properties to ensure that the header takes up the full width of the screen and is positioned at the very top.
  • We've added some styling to the header, including a background color, white text, and some padding.
  • In the content section, we've added some margin to the top to ensure that the content doesn't get covered up by the fixed header.
  • We've also added some padding and line-height to improve the readability of the text.

The position: sticky Property​

The position: sticky value positions the element relative to its nearest scrolling ancestor.

If no scrolling ancestor is found, the element is positioned relative to the viewport. You can use the top, bottom, left, and right properties to position the element exactly where you want it.

As an example:

Editor

Loading...

In this example:

  • The .sticky element will stick to the top of the screen when the user scrolls down the page.
  • The top: 0 property ensures that the element sticks to the very top of the viewport.
  • You can adjust this value to make the element stick to a different part of the screen.