CSS logo for articles

Absolute positioning is CSS

Position relative & absolute in CSS layouts

published: 08.02.2018

We have got new CSS layout methods like Flexbox and CSS Grid. Why would anyone learn such old methods at the time of responsive design? The short answer is that the new layout methods do not replace the old ones but supplement them. There is still need for absolute positioning and at least it is something every front-end coder should know and understand.

In this tutorial, I show you how to position elements exactly where you want to.

Background for absolute positioning

Again, we should remember how browsers work. How do they share the browser window real-estate for elements? It is beneficial to understand this even in the time we only design and create responsive pages. As I stated before in my article how browsers lay out elements, content is the key to giving space for elements. I will later cover floats and other layout methods, this is something you should know first.

When and where to use absolute positioning

There are numerous cases you may find absolute positioning good. One typical example is to place text over an image. Embedding text into an image is a poor choice in SEO terms and for accessibility. Screen readers have no idea of what text there is in the image. Of course, you’ll use alt -attribute as a text version of the image. But having text as text is the option we should do. Similarly, you may want to add a menu button, slideshow close -button etc. to stay in a certain position always.

Theory of absolute positioning

In absolute positioning, you need first to have an area within which element can be positioned absolutely. This area must have CSS property position: relative; Relative means that this element would have its “own coordinates” to position content. Otherwise, the coordinates are pointing to the browser window. Inside the “relative -positioned” -element other elements can have CSS property position: absolute;

Absolute positioning in CSS

Let’s make an example of an image with text on top of it. Again, you can open the example in a new browser tab to check the code.

Example of CSS absolute position

In this example, I have a <div> -element with id="siteimage" and within this <div> there is an image and a <h2> heading with class="siteimage-text". Here is the HTML code

<div id="siteimage">
   <img src="imgs/absoluteposition.jpg">
   <h2 class="siteimage-text">Drone photography by Kari Selovuo</h2>
 </div><!-- #siteimage -->

And the CSS for these elements is here. Notice the position -property and how the <h2> element is positioned to the right of the image near the top.

 #siteimage {
   text-align: center;
   margin: 70px 0;
   border-top: 6px solid hsl(47, 68%, 40%);
   position: relative;
 }
 
 .siteimage-text {
   position: absolute;
   top: 1em;
   right: 1em;
   color: #FFF;
 }

And this is how the page will look in a browser. You can open the example in a new browser window to inspect the code. The text on top of the image is absolutely positioned. Try scaling the page and you notice that the text is always positioned on the right and top. In a narrow window, the text looks almost as centered but that is ok.

Is absolute positioning really needed in 2018 and forward?

I’d say yes. There are new methods of positioning content and the above example could have been done using them. Still, understanding positioning in this level helps one to understand the other methods. I like my code short and simple. This is because the short and simple code is unlikely to cause problems in other parts of the page. Always use the simple and straightforward method to get things done.

Author of this site: Kari Selovuo

I'm a web developer/designer, instructor, and writer who has a mind of a developer and a heart of a designer. I like to share my knowledge and help others learn web development.

Twitter: @KariSelovuo

Leave a Reply

Your email address will not be published. Required fields are marked *

0 Shares
Tweet
Share
Share