Positioning in CSS is done with many types of attributes. In this article we explain the different values ​​that the CSS position attribute can have and the cases in which you can use it.

In what is known as CSS positioning, the most important cascading style sheet attribute is position. We are going to dedicate this entire article to explaining the different values ​​of position, to explain them and propose some examples that we hope will clarify the possible values ​​that it can take.

Let’s remember that in the previous article of this, the concept of was already introduced and a list of existing attributes up to CSS 2 was seen to position elements on the page. Let’s move on to the subject in question, seeing the possibilities that this language offers us. In addition, throughout this .com article, we are going to repeatedly mention a concept that was also explained above: .

position: static

It is the default value of the attribute and the normal positioning of elements on the page. It means that the elements will be placed according to the normal flow of HTML, that is, as they are written in the HTML code itself. To put it another way, static does not cause any special positioning of the elements and therefore the top, left, right and bottom attributes will not be taken into account.

We can see an example of static positioning:

CSS

position: absolute

The absolute value in the position attribute allows to position elements in an absolute way, that is, in a way defined by values ​​of the top, left, bottom and right attributes, which indicate the distance with respect to a point. The layers or elements with absolute positioning remain apart from the normal flow of HTML, which means that they are not affected by the place where they appear in the HTML code and neither do they affect other elements that are part of the normal flow of HTML.

The top, left, bottom, and right values ​​are expressed with y are a distance from the first containing element that has a position value other than static. If all the containers where the layer is positioned with position absolute (all its parents up to BODY) are static, it is simply positioned with respect to the top side of the page, in the case of top, the bottom for bottom, on the left side for left or right, in the case of using right.

Let’s see the following HTML code in which we have prepared several layers with position absolute, but with different characteristics:

CSS positioning

The first layer (this is how we call the DIV elements that have CSS positioning), has absolute positioning, like all those in the example. The attributes top: 100px and left: 30px mean that it is positioned 100 pixels from the top of the page and 30 pixels from the left. In this case, the top and left distances to locate the layer with position absolute are relative to the upper left corner of the available area of ​​the browser, since this layer is not inside any other layer with positioning other than static. In this first layer, attention should also be drawn to the z-index: 2 attribute, which will serve to indicate to the browser the position of the layer, in the third dimension, with respect to others that can be superimposed, so that it knows which one it has to be below and which above.

We can see that the second layer has a z-index: 1. This means that if it is positioned in the same place it will be hidden by the first layer, which has a higher z-index.

In the third layer we have tested the positioning using the bottom and right attributes, so we are positioning it relative to the bottom right corner.

Let’s see a second example where we are going to place a layer with absolute positioning and inside several layers also positioned with absolute.

In this case the first layer, which is not inside any other, is positioned with top and left with respect to the upper left corner of the space available in the browser for the body of the page. Nested layers are also positioned: absolute, but since they are inside another layer that has positioning other than static, their top and left values ​​are relative to the top left corner of the layer that contains them.

position: relative

The relative value in the position attribute indicates that the layer is part of the normal flow of page elements, so its position will depend on where it is in the HTML code and flow. In addition, the layers with relative positioning, admit the values ​​top and left to define the distance at which they are placed with respect to the point where the normal flow of the HTML is at that moment. As they affect the aforementioned HTML flow, the elements placed after the relative layers will take their dimensions into account to continue the flow and know where to place them. However, the configured top and left will not be taken into account.

Let’s look at an example that might clarify things.

Hello

hello again!

The H1 and H2 tags respect the HTML flow and we also have a DIV element where nothing has been specified in position, so it is static and therefore it is also affected by the flow. There is a relative layer, in the second DIV element, which is also positioned relative to the normal flow. Since it has a top and a left, it appears slightly off-site with respect to the flow.

The last H2 that appears is placed taking into account the flow and takes into account the relative layer, so it leaves a blank space above it, but it does not pay attention to its real position, which was marked with the top and left attributes.

position: fixed

This attribute is used to position a layer with absolute positioning, but its final position will always be fixed, that is, even if the document is scrolled with the browser’s scroll bars, it will always appear in the same position.

Where the layer will “anchor” is always relative to the body (the browser’s available space for the page). If we use top and left, we will be marking its position with respect to the upper left corner and if we use bottom and right its position will be relative to the lower right corner.

Let’s see an example.

Hello

I put text to be seen!!

This does scroll, with so much br

…

You can see there are multiple layers with position: fixed and a bunch of BR so the page can have a scroll. If we see the page running and scroll down with the scroll bar, we will see that the fixed layers always maintain the same position.

Doctype for the fixed attribute

The next point is irrelevant at the present time, as browsers have come a long way and there are no support issues in the “fixed” position attribute. Also the doctype changed its definition with HTML5. You can find more information in this and in the article. The fixed value in the position attribute works in all browsers, but in the case of Internet Explorer it only works in version 7 and higher. Also, for it to work in Explorer a DOCTYPE! has to be declared. Various types of DOCTYPE! would do, however it should be declared in full format. Something like: Or to give another example:

position: heritage

The value inherit indicates that the value of position has to be inherited from the parent element. It doesn’t work in Explorer, at least until version 8. It’s really of little use, and besides, since it doesn’t work in today’s most widely used browser, it makes even less sense to use it. For this reason, we do not give examples.

Conclusion on the CSS position attribute

We hope that with the previous explanations and examples we have been able to understand the different possibilities of the position attribute, which is undoubtedly key for CSS positioning. The most common for web layout is to use static positioning, but absolute positioning, together with fixed positioning, and even relative, can be very useful for more complex designs, where greater precision is required in the placement of the different elements. or the layers.

Also, for Javascript and DHTML effects in general, absolute positioning is often used. They are very useful because they allow the dynamic elements not to be part of the normal HTML flow, and therefore, we can place them anywhere in the available area of ​​the browser, and even move them dynamically when changing their…