CSS3 The Complete Guide - Positioning elements on the page with position

The HTML structure will be as follows:

We will also have a file named style.css that will have this structure:

#image {
	background: url('./hcode.svg') no-repeat;
	width: 450px;
	height: 150px;
}

This style will be responsible for loading the image on our page. When accessing the HTML file in the browser, we will see the following:

Now let's start defining the position styles for our image, and we will see how its position changes according to the different values of this style.

One important thing to remember when working with the position style is that when defining this style, we need to use the top, bottom, right, and left styles to determine where the element will be placed on the page. We can say that these styles define the elements' “coordinates” of position. Keeping this important point in mind, let's now analyze each possible value for the position style.

static

The first value we will analyze is the position: static style. This is the default value for the position of any element. When we apply it, we are saying that the element will be positioned according to the normal flow of the application, meaning its position will not be affected.

Our CSS file will look like this:

#image {
	background: url("./hcode.svg") no-repeat;
	width: 450px;
	height: 150px;
	position: static;
	left: 50px;
	top: 50px;
}

In theory, our image should be moved 50 pixels to the right and 50 pixels down. Going back to the browser, we will see the following result:

We might think: “the image's position hasn't changed, it's still in the same place.” That's exactly the effect of static. The styles top, bottom, right, and left simply do not work. This exception only occurs with the static value. We notice that it indeed leaves the element “static”.

relative

The relative value defines that the element can have its position changed. Its position will be relative to itself, to its initial position. We will add this style to our code with the following line:

position: relative;

We will see the following result in the browser:

Note that now the displacement of the element has indeed occurred, following the “coordinates” we provided in the CSS file with top and left.

absolute

When we talk about positioning with CSS, one of the first questions we may ask is about the difference between position relative and position absolute. We will understand the difference between them now.

An element with position set to absolute will have a position relative to an ancestor element. In fact, it will define its position based on the parent element that has a position set to relative. If there is no preceding element that has this type of position, the position will be relative to the browser itself. Let's see in practice how it works. We will replace the position value in our #image selector:

position: absolute;

But, before testing, let's define a position relative for the tag with id “#principal”. Also, let's move this

a little to the right:

#principal {
	position: relative;
	left: 150px;
}

This will be the result in the browser:

Analyzing the browser we can notice two things:

1 - Our image is on top of the text elements. This is the effect that position absolute has, it allows the element to be “loose” on the page, and we can position it wherever we want.

2 - There is a blank space to the left of the image and paragraphs, which proves that the 150-pixel displacement indeed occurred. Thus, our image respected the position of its parent element, the

with id “#principal” to define its own position. This happened because the “#principal” has its position set to relative. If we remove the position style from this element, our image and paragraphs will base their positioning on the browser, as we can see below:

This happens even if the left: 150px style remains applied to the “#principal” tag.

So, if someone asks us what the difference is between position relative and position absolute, we can say: “The difference between them is basically which element will be used as a reference for positioning. The relative considers its own position to move. Meanwhile, position absolute considers the position of the parent element that has a position relative, or else it will be relative to the browser itself.”

The position absolute is very interesting, but use it carefully, especially if you are working with responsive design. The fact that we can position the element wherever we want can cause a lot of headaches when we need to reposition it on smaller devices.

fixed

The position fixed, as the name implies, defines that the element will stay fixed on the page. In other words, it will always be visible. Even if we scroll (the scroll bar), it will continue to be displayed.

To see this style in practice, we need to force our page to generate a scroll. Therefore, we will set the CSS of the “#principal” selector as follows:

#principal {
	height: 1000px;
}

And we will change the position of our image to fixed:

position: fixed;

When we go back to the browser, we see the following result:

It seems that the position is like absolute, since nothing has changed compared to the last example. But, when we scroll, we will see the following:

Note that the image remains in its position, even having to “pass over” other elements, and it stays fixed on the page.

This style can be used when we want to create a navigation menu that continues to be displayed no matter where the user is on the page, even when scrolling. You may have even seen some of these models on other websites on the Web.

sticky

The position sticky is defined as the union of the concepts of position relative and position fixed. When applied to an element, its position is based on the user's scroll, and the element will be displayed as long as its parent element is in the page display. Let's move on to the example! We will replace the position value in the CSS file:

position: sticky;

When we update the browser, we will see the following:

The element seems at first to be with position relative. After all, it respected the “coordinates” indicated for its position, but it's not on top of any other element. However, if we scroll, we will see the following:

Note that now the image is on top of the paragraphs, just like fixed position.

However, position sticky is not completely the same as position fixed. As we mentioned before, the element where we apply this style will only be displayed as long as its parent element is also visible. To see this difference in practice, let's create another

in our HTML, which will be a sibling to the main

. It will contain some more paragraphs of text, and its structure will be as follows:

Additionally, we will change the CSS of “#principal” to this:

#principal, #second-div {
	height: 500px;
}

Now the two divs will have 500 pixels in height. When we return to our browser, we see that the style continues to work. But, as we are approaching the end of the page, we see the following:

Our image is not on top of the paragraphs of the other

, as the style works only while its parent element is being displayed. Thus, we can perceive that the position sticky has a limit of action.

In this article, we learned all possible values of the position style and saw the features that each of these values offers us. Thus, we are now in a position to decide when to use each one.

You can find the code developed in this article on our GitHub. This way, you can conduct your own tests :)

See you in the next article!

css-3

css

position