CSS positioning

Cascading Style Sheets incorporate multiple ways to position elements on the page, commonly known as CSS positioning.

In .com’s CSS Manual we have discussed CSS positioning at various points, with the different techniques to create and place parts of the page in an absolutely precise way. In all cases we explain various details from different approaches that undoubtedly give a particular vision of the positioning of elements on web pages. For example, we have already talked about what are , and also the , as well as other matters such as or the .

However, it remained to offer some general and detailed explanations about CSS positioning, which can give readers a global idea about this interesting subject. Without a doubt, it is a subject that is worth studying and also practicing. In this article we are going to offer various theoretical knowledge and at the same time we are preparing a video in which we will show the different options for web positioning in practice.

Attributes for CSS positioning

There are numerous attributes to position with CSS any element of the page. Also, as new versions of CSS are released, these attributes and their possible values ​​increase. In CSS 2 we have various attributes that we will see below.

position attribute:

This attribute is, let’s say, the main one to define the type of positioning of an element. It is worth looking at separately and in detail. We will cover it later in the article, but we anticipate that it will allow several values ​​to establish how the element will be positioned on the page and if it will be part of the . Its possible values ​​are absolute, fixed, relative, static, and inherit.

top, left, right, bottom attributes:

They are used to indicate the position of an element, when it has the position values ​​”absolute”, “relative” or “fixed” (in other values ​​of the position attribute these attributes are ignored). The top attribute indicates the distance from the top edge of the page and left from the left edge. You can also optionally indicate the position with bottom, which is the distance from the bottom, and right, which is the distance from the right.

float and clear attributes:

Float is used to establish that an element has to “float”, placing the values ​​”right” or “left” so that they float to the left or right. For the sake of clarification, floating elements is something like what happens when we define the HTML attribute align=”right” or align=”left” on images or tables. With the clear attribute we make the element is placed in the first free area that it has to the place where it is indicated. For example, the value of clear “right” causes the element to be placed in the first place where it does not have any elements floating to the right. The value of clear “both” causes the element to be placed where it doesn’t have floating elements, both to the right and to the left.

clip attribute:

Sets a clipping area of ​​the visible portion of an element. This clipping area is set with various values, as detailed in the article.

display attribute:

Specifies the type of box that an element must have, which can be of various shapes. This attribute is also widely used and among the most common values ​​we could highlight: “none”, which means that this box or element does not appear on the page or reserve space for it. “block”, which is used to make the box a block and display it on a line or lines independent of other elements on the page. “inline”, which indicates that this box has to be displayed on the same line as other elements written before or after it.

overflow attribute:

This attribute is used to say what happens with the elements that do not fit in a box due to its dimensions and the content it contains. It is explained in detail in the article.

visibility attribute:

Attribute to define the visibility of an element. With this attribute we can say that certain elements of the page are visible or invisible, but attention, even if an element is invisible, it continues to occupy space on the page. If we want it not to be invisible and space is not reserved for it on the page, we must use the display attribute with the value “none”. The most common values ​​for visibility are: “visible”, which makes the element visible (default value) and “hidden”, which makes the element invisible, even though it continues to take up space.

z-index attribute:

This attribute takes the value of any integer. It is used to indicate which layer must be seen above or below another or others, in case several layers are superimposed. At higher z-index values, the layer is placed further in front, obscuring other layers with lower z-index values.

This has been a general review of the different style sheet attributes that are involved in what is known as CSS positioning. For the reference of those interested, we recommend reading the articles mentioned at the beginning of , especially the article on .

In it we will see different use cases of the position attribute, which is key to understanding CSS positioning.