CSS position property - What are its values?

CSS position property - What are its values?

Among the large number of properties handled in this technology, the position CSS property is one of the first to master. In CSS you mainly work with two types of HTML elements: block elements and inline elements. While block elements by default take up all available space across the width of the screen and are placed one below the other when there is more than one; inline elements only occupy the necessary space within a line and if there is more than one in an HTML, they are positioned side by side, all on the same line. However, this does not have to be exactly the case, since the CSS position property allows you to change the position of the different elements of an HTML, enriching web pages and native applications to be more attractive and better distributed.

There are five values ​​within the CSS position property that can be used with different elements to create an organized view of a web page or native application. These properties are:

  • Static: Static positioning.
  • Relative: Relative positioning.
  • Absolute: Absolute positioning.
  • Fixed: Fixed positioning.
  • Sticky: "Glued" positioning.

Static Value (Static Positioning)

You could say that the Static value is the default positioning that any HTML code has. Therefore, with this value, every HTML element will have its natural order. As explained before, all block elements will go one below the other, while inline elements will appear one after the other, going from left to right on the screen.

Relative Value (Relative Positioning)

To use the Relative value in an HTML element, the keyword “Relative” must be used. This CSS position property value is one of the simplest to use. Because all elements are positioned the same way they would be if Static were being used, they can vary their position slightly depending on other properties like top, bottom, left, or right. This way, if you include an element and set it to “left:60px”, it will be positioned 60 pixels to the right, starting from the leftmost point on the screen. The same would happen with any other value.

Absolute Value (Absolute Positioning)

By using the “Absolute” keyword, the selected element will be given an absolute value. This might be a bit more complex than the rest because it doesn't take the document as the reference point but uses the first non-static container as the origin point. This way, if the first parent container has a CSS Static position property value, it will skip it and will go to the next one until it finds one without the value or it runs into the <body> tag.

Fixed value

The Fixed value or fixed positioning is a value of the CSS position property that is the sister of absolute positioning. Because the operation of both is almost the same. The only difference is that the selected element will remain in a single position that will depend on the visual region of the browser. When an element has this value, the element will remain fixed on the screen even when the user scrolls and scrolls the page.

For example, if the element is set with the properties top:0 and right:0, it will stay in the top right corner of the screen, and it will stay there no matter how much you scroll down.

Sticky Value (Positioning «sticky»)

Sticky positioning or Sticky value, as its name implies, is a value of the CSS position property that is usually used when you want an element to be fixed in a specific place permanently. It is common to see it in elements such as pages or section headers.

One of the main ways in which it is used is that when scrolling through the page, you reach a certain element that will remain fixed at the top. Which will stay there as long as you keep scrolling down.

Properties that define the position of an object

When defining the position of an object in HTML with CSS, the most commonly used property is position. However, it is not the only property that can define position, but there are a series of properties that can also do so, these are:

  • Position: It is the main property discussed in the article. Although its name indicates the position, truth is that this does not indicate a position as such for the object, but rather indicates a coordinate system that will be used in its position.
  • Display: This property is responsible for defining how an object will be displayed. It contains values ​​such as block and inline, which were already discussed at the beginning of the article. In addition, it includes other values ​​such as table, which can be used to force components to behave like others.
  • Flex: This property's main function is to indicate to a flexible object what its available capabilities are to alter its dimensions. Their values ​​also often influence the positioning of objects in the HTML.
  • Float: The float property makes it possible for a block to ignore the coordinate system applied to it so that it moves to the left or the right.

Properties that define where an object is placed

Other properties that can alter positioning of an object and define where an object is placed when working with CSS are:

  • margin: It is used to set the margin on all four sides: top, right, bottom, and left.
  • padding border: The padding property is used to determine the padding space that exists between the content of the element and its borders. This property can be used as a shortcut to avoid having to individually assign a value to each side (padding-top, padding-right, padding-bottom, padding-left).

Levels or depth

This is a very important concept to know when working with CSS position properties. The “z-index” property is used to indicate the level of depth that an HTML element has concerning the others. Its use is really simple, it is only a matter of indicating the depth level with a number (example: z-index: 10; z-index: 2 or z-index: -5). Always the elements with lower numbers end up being positioned below those with a higher number.

It should be kept in mind that, as with the top, left, bottom, and right properties, it can only be applied to elements that use a property other than Static.

Bibliographic references



Related Posts

Subscribe newsletter

You confirm that you agree to the processing of your personal data as described in the Privacy Statement .