One of the main dilemmas when creating a website is the positioning of elements in CSS . This is where a CSS property called position comes to the rescue. It helps us manipulate the location of the element.

We can add the following six values ​​to the position CSS property:

• static
• relative
• absolutely
• fixed
• sticky
• inherit

Positioning elements in CSS

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

Absolutely

This is a very powerful type of positioning that allows you to literally place any page element 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 no such parent exists, it will default back to the element itself< html> , which means it will be placed relative to the page itself.

The trade-off (and the most important thing to remember) with 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 matter to consider any time you use absolute positioning. Its overuse or improper use can limit the flexibility of your website.

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

In the image you can see two divs with height and width of 100 px. As you know, a div is a block element , and that’s why the squares ( divs ) are positioned one below the other.

If we gave the lower (green square) element position: absolut , top:0, left:0 values, it would behave as in the picture below.

The element is positioned relative to the document itself outside of any flow of the html page. It should be remembered that if this giant (green square) was located in an element, it would be positioned relative to it. Of course, if that element has an absolute or relative position.

Fixed

A fixed value is similar to an absolute value in that it can help you position the element anywhere relative to the document, but the offset does not affect this value. From which it follows that this element will remain fixed in relation to the side. No matter how you scroll up and down with the mouse, 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 specification and is only partially accepted by selected browsers. In other words, it’s probably not the best idea to use this on a live production site.

What is he doing? Well, it allows you to position an element relative to anything in the document, and then when the user moves past 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.

Let’s take the following example:

.element {

Position:sticky;

top: 50px;

}

The element will be positioned relatively until the scroll position of the viewport reaches the point where the element is 50 pixels from the top of the viewable area. At that point the element becomes sticky and stays in a fixed position at the top of the 50px screen.

Relatives

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

We’re sure you can imagine that being able 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 line up the way we want them to. There are two other things that happen when we set the position: relative to the element that you should be aware of. One is that it introduces the ability to use a z-index on that element, which doesn’t work with statically positioned elements. Even if you don’t set a 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.

The second thing that happens is that it limits the range of absolutely set children. 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 don’t 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 set an element to position: static ; is to forcefully remove some positioning that has been applied to an element outside of your control.

Inherit

Inheriting positioning explicitly sets the value of the parent (if the parent is position: absolute , the child will be 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.