CSS Series: Positioning

Understanding CSS Position Property

A look around to static, relative, absolute, fixed, sticky

Understanding CSS Position Property A look around to static, relative, absolute, fixed, sticky
Understanding CSS Position Property A look around to static, relative, absolute, fixed, sticky
Understanding CSS Position Property — A look around to static, relative, absolute, fixed, sticky

What is positioning?

There are different ways or methods which allow us to put elements where we want, to position them on the document/screen. We can use display, float, and position properties. Today we are going to cover the position property.

Which are the values for position?

  1. Static (default)
  2. Relative
  3. Absolute
  4. Fixed
  5. Sticky

Let’s talk about each of them

This is the default value for an element. Static positioned elements are displayed in the normal page flow. The left, right, top, bottom and z-index properties do not affect an element with position: static.

So, let’s see an example of this.

Understanding CSS Position Property — A look around to static, relative, absolute, fixed, sticky

In the above image, we can see that position: static; is not present (at least you are not seeing it, but you know is the default value), and also, you see that the order of the elements is the same as you have defined on your HTML (#first-element is the first element rendered, then, #second-element). Now we are going to add the position: static to show that nothing is going to happen, because, as we said before, is the default value, and, we will add the top and left properties, just to show they are not going to affect the static behavior.

Understanding CSS Position Property — A look around to static, relative, absolute, fixed, sticky

Now that we have this clear, I’m going to show the differences if we used absolute or relative (next in our queue).

Below you can see that we are using position: absolute, and looks like the #first-element just disappeared, but, it is behind the #second-element because both (as we are setting position, top and left at the div selector) have the same properties. But, this allows us to take an introduction to the absolute behavior.

Understanding CSS Position Property — A look around to static, relative, absolute, fixed, sticky

So, the next example will show the use of the position: relative , and, we can see both elements have been moved as a kind of block, and that is because #first-element was moved from 0,0 to 100,100, and #second-element from 100,0 to 200,100.

Understanding CSS Position Property — A look around to static, relative, absolute, fixed, sticky

Position relative means that is relative to itself, to the place it has in the DOM. Moving this element around the layout does not affect the position of any other elements. Also, now we can use properties like the top, left, bottom, right, and also z-index

In our first example, we can see the first div is positioned relative to itself and moved 20px from the left and the top, also, we can see that the second elements remain in the same position, because the space of the first element is still present.

Understanding CSS Position Property — A look around to static, relative, absolute, fixed, sticky

Now we are going to add z-ondex: -1, just letting you guys know that it works with the relative positioning.

Understanding CSS Position Property — A look around to static, relative, absolute, fixed, sticky

And finally, we are going to move the second element 20 negative pixels to the top of the layout, that is because I want to show you that the 0px is from the place that the element was initially and not the 0px from the layout.

Understanding CSS Position Property — A look around to static, relative, absolute, fixed, sticky

Absolute is a powerful type of positioning because it allows you to literally place an element everywhere you want it using top, right, bottom, and left .

When you set this position, the element is removed from the normal document flow (no space is created for the element in the layout) and is automatically positioned to the starting point of its parent element if this has a position value other than static. If it doesn’t have any parent or the parent is static, the <html> tag will be its parent. Also, margins do not collapse with other margins. So, said that, let's play.

In the first example, I just created a container with border 1px red, with this we are going to visualize when we move the #first-element.

Understanding CSS Position Property — A look around to static, relative, absolute, fixed, sticky

Now, adding the position absolute, plus, top and left properties, we can see how #first-element was positioned where we want in the layout. In this case, we moved it 100px from top and from left. You will see that the container is just wrapping #second-element, that is because the elements that are using position absolute are not taking space in the normal flow, so, all the following elements are going to fill that space

Now, we are going to play a bit with static and relative. If we add position: static to #container, and you will see that nothing happened! That is because, as we already talked, all elements has static as default positioning.

Understanding CSS Position Property — A look around to static, relative, absolute, fixed, sticky

But, if we change the static value for relative, what do you think is going to happen?…. Yes, #first-element will be taking #container as a reference point, so, top and left properties will be set from #container and not from the <html> tag

Understanding CSS Position Property — A look around to static, relative, absolute, fixed, sticky

Elements with fixed positioning, like with absolute, are removed from the normal flow page, also, they are relative to the <html> and not any other parents. Fixed elements are not affected by scrolling.

Understanding CSS Position Property — A look around to static, relative, absolute, fixed, sticky

Sticky positioning is amazing, it can be thought of as a hybrid of relative and fixed positioning.

The element is positioned according to the normal flow of the document and the offset is relative to its nearest scrolling parent

The offset does not affect the position of any other elements.

You must specify at least one of top, right, bottom, or left. Otherwise, it will be like any other relative positioned element.

Understanding CSS Position Property — A look around to static, relative, absolute, fixed, sticky

So, here we are, in the end. Just want to clarify that I showed the basics, there is a lot of mixes you can do to get awesome layouts, so please, be my guest and play with the known! And as I always say…

Hope It Helps!

Just a web UI developer, with more than 10 years experience, trying to share my own personal knowledge.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store