Written by Andrei MoraruMar 26, 2020

We integrated into our Technical Blog section a new project that Andrei, a great developer in our community, wanted to share with all of us. Now, the project consists of a series of courses created by Andrei with a lot of passion and dedication, giving from his knowledge gathered during years of work and sleepless nights the chance to learn, grow and become our best version in the future. You can find the other chapters of the course in the Tech section of our blog - here.

Now let's discover the next part of the course "Learning CSS with Less - Positioning elements":

  1. Topics of discussion
  2. The position CSS property

1. Topics of discussion

In this tutorial, we are going to talk about the position CSS property of elements. So, let's have some fun.

2. The position CSS property

The position CSS property is used to determine the positioning style for an element. Said positioning can be modified by using 4 other CSS properties: top, right, bottom and left.

You have 5 different positioning types:

As for usage examples, static positioning is, of course, used when you want the element to just appear where it's supposed to. Relative positioning is used when you want to slightly adjust the regular position of an element or when you want a nested element to have an absolute position.

Speaking of absolute positioning, that comes into play when you want to have an element, say a button, that also has an icon inside it. You give the button a relative position and then give the image element (which can be img or a div with the image as background) inside it an absolute position and then use the top, right, bottom and left properties to position it further.

Fixed positioning is something I actively avoid, but which has its uses as I have already mentioned while sticky positioning may be useful for certain announcement areas or messages you want to be displayed even when the user scrolls past the natural location.

Here is some less code for positions:

@position-value: 10px;

.static {
  position: static;
  top: @position-value;
  bottom: @position-value;
  left: @position-value;
  right: @position-value;
}

.relative {
  position: relative;
  top: 8*@position-value;
  bottom: 8*@position-value;
  left: 8*@position-value;
  right: 8*@position-value;
}

.absolute {
  position: absolute;
  top: 7*@position-value;
  bottom: 7*@position-value;
  left: 7*@position-value;
  right: 7*@position-value;
}

.fixed {
  position: fixed;
  top: 30*@position-value;
  bottom: 30*@position-value;
  left: 30*@position-value;
  right: 30*@position-value;
}

.sticky {
  position: sticky;
  top: 20*@position-value;
  bottom: 20*@position-value;
  left: 20*@position-value;
  right: 20*@position-value;
}

As you can see, there is something new in the code, and that is a variable. Less allows you to create such variables which can be reused inside classes, as we do in this example. Moreover, we can even use mathematical operations with these variables.

Let's put some HTML code that uses these classes as well:


  
    
    
Block with static text
Block with relative text
Block with absolute text inside relative block
Block with absolute text
Block with fixed text
Block with sticky text
  

And that about covers it for this tutorial. In the next one, we will be discussing the float property. See you then.

Interested in finding out more about the author? Andrei's world is just a click away!

If you are interested in working with a team of expert remote developers, contact us TODAY!