How to Use the position Property in CSS

A basic principle of CSS layout demonstrated in simple examples with boxes

Miroslav Pillar
Feb 24 · 4 min read
Photo by Aleks Dorohovich on Unsplash.

In general, CSS isn’t popular among most developers and knowledge of CSS tends to be underestimated. That’s why there is a lot of frustration when styling elements.

It can be particularly tricky to style elements that have an ambiguous relation to other components in the DOM. In order to understand how CSS positioning works, you should get to know the basic principles.

The appropriate position of an element is case-dependent. You might want to move only a particular element with its children from the default position. In that case, it’s a good idea to use the position property.


The position Property

This property helps to manipulate the location of the selected element. There are five different position values:

  • static
  • relative
  • fixed
  • absolute
  • sticky

Now you should keep in mind that elements are then positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. How they behave also depends on position value, which is the most confusing part for developers.

Let’s master these values with simple examples.


position: static

This value is set for all HTML elements by default. It means they are positioned according to the normal flow of the page.

Also, keep in mind that elements with the static position are not affected by the top, bottom, left, and right properties.

Now, let’s look at a simple example with one container and three boxes inside:

And here is our CSS:

As stated above, position: static is set as a default value of each element. For this reason, it’s not necessary to add it to the CSS file. Boxes are stacked according to the normal flow.

position: static

position: relative

An element with position: relative is positioned relative to its normal position.

Now, let’s try to position our yellow box next to the green boxes. It should look like this:

position: relative

Because we want to move the yellow box from its normal position, we have to adjust CSS in the following way:

Try to play around with boxes and check out their behavior.


position: fixed

An element with position: fixed is positioned relative to the viewport. This means it always stays in the same place even if the page is scrolled.

An important aspect to keep in mind is that the element is removed from the flow of the document, so it does not leave a gap on the page where it would normally have been located.

Let’s give a fixed position to our yellow box:

And here is the result:

position: fixed

Now, if you scroll the page, the yellow box will stay in the viewport. As an example, this is how a website’s navbar should be used. Also, green boxes are stacked to the top because of the aspect mentioned earlier.


position: absolute

An element with position: absolute is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

An element withposition: absolute is removed from the flow of the document and other elements will behave as if it’s not even there while all the other positional properties will work on it.

Note: If an absolute-positioned element has no positioned ancestors, it uses the document body and moves along with page scrolling.

Now, let’s modify our example by moving one green box inside the yellow box.

And let’s assume the yellow box has position: fixed and right: 10px(same as in the example above).

What if we wanted to move the inner green box below the yellow box? At the same time, we’d like to not modify the HTML file.

We can do it with by giving position: absolute to the green box:

If you scroll the page, both boxes will stay in the viewport.


position: sticky

This value is rather experimental because it’s not supported in all browsers yet. An element with position: sticky is positioned based on the user's scroll position.

A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport. Then it "sticks" in place (like position: fixed).


Space for Practice

Getting to know CSS can sometimes be very tricky and frustrating. The only way how to master the principles is by practicing. Write a lot of code, create simple projects, style elements as you wish.

If you’d like to sharpen your positioning skills, feel free to play with the boxes.

Thanks for reading!

Better Programming

Advice for programmers.

Thanks to Zack Shapiro

Miroslav Pillar

Written by

A self-studied web developer with a passion for writing about Frontend, Javascript and related content. Subscribe on miroslavpillar.com

Better Programming

Advice for programmers.

More From Medium

More from Better Programming

More from Better Programming

More from Better Programming

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade