Sometimes it’s good to review the basics.
Lately, I’ve been into deep frontend work (or at least deeper than usual). I had to adapt a bootstrap theme and make some of it’s elements and plugins work as we needed, but I had some trouble with some elements appearing in weird places or with strange dimensions. I found out I had to go back and review the rules for positioning. Here’s a quick summary of how they work:
Go against the flow
By default all elements on a web page would have a position: static that will make them appear in the same order they’re declared in the HTML file. Fun starts when you change this CSS attribute to fixed, absolute, or relative.
Fixed position
This value for the position property is the one to go for when you want elements to remain in a certain position in the browser window, regardless of other elements and scrolling. Examples of this would be a sticky menu that remains at the top of the page even when scrolling down. Or a notification on your website appears on the lower right corner of the browser window until it fades out.
To position the fixed element, assign values to one or more of the following properties: top, right, bottom, and left (the coordinates). Each one refers to the corresponding border of the browser window, and you can use, as usual, any unit normally available on CSS. The possible values are as follow:
- A value of
0means that the element correspondent side is right on the chosen border. - A positive value would mean that the element is displaced that amount inside the browser window.
- A negative value means that the element is displaced that amount outside the browser window.
For our notification example, if we set these properties:
.fixed-notification {
position: fixed;
bottom: 0px;
right: 0px;
}
We’ll have it on the bottom-right corner of the browser window. If we set the amounts to 10px, it will have some more space from the corner, and if we set them to -10px, the notification will be partially hidden.
Relative position
In this case, the amounts we set for the coordinates will modify the position of the element based on its would-be normal position, according to the normal flow of the page. If you don’t change the value for the coordinates (all values at zero), the element will stay at its original position. Note that our element will still follow the flow of the HTML code.
This value for the position is also intended to work with the next one we’ll cover.
Absolute position
This positioning and the associated coordinates will allow the object to move around freely, without following the HTML flow. The reference position will be the position of the first element that contains our element that has a position different to static. And if none is found, the reference will be the <html> element.
For example, let’s say you are creating a picture carousel for a website. For the controls, you want to position a left and right arrow at each side of the picture being shown. In this case, you would need something like this:
...
<div class="carousel-container">
<ul class="slides">
<li class="image-container" ... />
<img ...>
</li>
...
</ul>
<ul class="carousel-controls">
<li>
<a class="left-arrow" ... ><</a>
</li>
<li>
<a class="right-arrow" ... >></a>
</li>
</ul>
</div>
...
.carousel-container {
...
position: relative;
/* We want our carousel to be where we put it, so no coordinates will be changed */
...
}
.left-arrow {
...
position: absolute;
left: 20px;
top: 50%;
...
}
.right-arrow {
...
position: absolute;
right: 20px;
top: 50%;
...
}
With these, we’ll get our left and right arrows positioned each at the left and the right borders of our .carousel-container, and centered vertically. If our .carousel-container didn’t have a position set, we would find our arrows aligned vertically in the middle of the whole HTML page, and a bit inside from the borders left and right border.
Enter the third dimension
Additionally, when we have elements positioned as absolute, relative or fixed that overlap, we can use the z-index property to set the element order. A higher value will position the element at the front and a lower value a the back.
Conclusions
I hope this helps you to know a bit more about CSS positioning and its uses, or to refresh your memory. In my experience, the absolute and relative values can be the trickiest when combined, so here’s a rule of thumb:
If you find yourselves dealing with modifying elements with absolute position, always find first the closest parent container with relative positioning before changing the coordinate values. In short: find where you are first, and that will save you several headaches 😉
