Skip to Main Content

One of the main dilemmas at create a website is the positioning of the elements in CSS-u. CSS comes to the rescue here property which is called position. It helps us to manipulate the location of the element.

CSS property position we can add the following six values:

 

  • static
  • about
  • absolute
  • fixed
  • sticky
  • Inherit

 

Positioning elements in CSS-u

Below we will explain in more detail each of these values, which are used to position the elements in CSS.

 

Absolute

This is a very powerful type of positioning that allows you to place literally any element of the page exactly where you want it. Use the positioning attributes up, left, down, and right to set the location. Remember that these values ​​will be relative to the next parent element with relative (or absolute) positioning. If there is no such parent, it will return to the element by default , which means that it will be set in relation to the page itself.

The compromise (and the most important thing to remember) about absolute positioning is that these elements are removed from the flow of elements on the page. Other elements do not affect an element with this type of positioning and do not affect other elements. This is a serious thing to consider every time you use absolute positioning. Excessive or improper use may limit the flexibility of your website.

If the child element has an absolute value, then the parent element will act as if the child is not there at all.

You can see two in the pictures divwith a height and width of 100 px. As is well known it is a giant block element and therefore squares (div-ovi) position one below the other.

If we were to give the lower (green square) element position: absolute, top: 0, left: 0 values ​​it would behave as in the picture below.

The element is positioned relative to the document itself outside each flow html sides. It should be remembered that if you take this one div (green square) located in an element, it would be positioned in relation to it. Of course if that element has absolut or about position.

 

Fixed 

Fixed the value is similar to the absolute, because it can help you place an element anywhere relative to the document, but scrolling does not affect this value. It follows that this element will remain fixed in relation to the side. No matter how you scroll up and down, the element stays where it was before we moved the page flow.

 

Sticky

Sticky value is like a compromise between relative and fixed value. This is currently an experimental value, meaning it is not part of the official specifications and has only been partially accepted by selected search engines. In other words, it's probably not the best idea to use this on a live production website.

What works? Well, it allows you to position an element relative to anything in the document, and then, when the user moves next to a certain point in the viewport, it fixes the position of the element at that location so that it remains displayed as a fixed value element.

Take the following example:

 

.element {

Position: sticky;

top: 50px;

}

 

The element will be relatively positioned until the location of the field of view movement reaches a point where the element will be 50 pixels from the top of the visible area. At that point, the element becomes sticky and remains in a fixed position at the top of the 50-pixel screen.

 

Relative

This type of positioning is probably the most confusing. What it really means is "in itself." If you set position relative on the element, but without any other positioning attributes (up, left, down or right), it will not affect its positioning at all. It will stand exactly as it would if you left it as a position: static; But if you give it some other positioning attribute, say, top: 30px will move its position 30 pixels down from where it would otherwise be. We will show this in the next photo.

We are sure that you can imagine that the ability to move an element based on its regular position is quite useful. We can use this option to align form elements that tend not to want to be arranged the way we want. There are two other things that happen when we set a position: relative to the element you should be aware of. One is that it introduces the possibility of using the z-index on that element, which does not work with statically positioned elements. Even if you do not set the z-index value, this element will now appear on top of any other statically positioned element. You cannot combat this by setting a higher z-index value on a statically positioned element.

Another thing that happens is that it limits the range of absolutely placed subordinate elements. Any element that is subordinate to a relatively positioned element can be absolutely positioned within that block.

 

Static

This is the default for each individual page element. Different elements do not have different default values ​​for positioning, they all start as static. Static doesn’t mean much; it just means that the element will enter the page as usual. The only reason you would ever put an item in position: static; is to forcibly remove any positioning that has been applied to an element beyond your control.

 

inherit

Inheriting positioning explicitly sets the parent value (if the parent position is: absolute, the child will be in position: absolute; if the parent is position: fixed, the child will be position: fixed).

 

For more news and interesting stories from digital marketing visit our blog page or follow our Instagram profile.

Made by Miloš Stojanović - Senior Web Developer @Digitizer