Chris Love

Last Updated - Sat Jan 09 2021

Recently I was listening to the Web Ahead podcast with Jen Simmons and Scott Jehl. The conversation revolves around modern web development in particular responsive web development, performance and considering the user needs. At one point Scott and Jen started talking about the 'fixed positioning' issue. At first I had think what they were referring too because I never use fixed positioning. As they continued the dialog I realized why they might have issues, they were talking about using CSS fixed positioning to place things like a navigation toolbar.

Somewhere back in time I found absolute positioning to solve many layout issues, including statically placing a navigation toolbar at the desired location. I have been utilizing absolute positioning for layouts so long it is second nature. In fact I created toolbarjs to help with mobile navigation. But hearing this conversation helped me realize that many web developers still have not discovered the magic absolute positioning offers.

CSS Position Property

Each HTML element has a CSS position property. The default value is static, which means it is just rendered where it is within the DOM. Static position does not honor left, right, top or bottom properties.

Relative Positioning

The next position value is relative, which allows you to set positioning relative to its natural location. For example if you set the left, right, top or bottom properties to the following values:

.target{ position:relative; top: 25px; left: 25px;}

The element will render 25 pixels below and 25pixels to the right of its natural position. This can be combined with a CSS animation or transition to create a nice movement animation experience.

Absolute Positioning

Similar to relative absolute positioning honors the top, right, bottom and left properties. The difference is absolute positions the element relative to the document or the nearest parent element utilizing relative positioning. If we change the previous example to use absolute positioning the target element now positions itself 25pixels from the top left corner of the view port.

.target{ position:absolute; top: 10px; left: 10px;}

Fixed

Last there is Fixed positioning, which behave similarly to absolute positioned elements. The big difference is they do not scroll when the window is scrolled. This is why web developers default to fixed positioning for things like toolbar navigation widgets.

.target{ position:fixed; top: 10px; left: 10px;}

Applying Absolute Positioning To A Navigation Toolbar

So why not just use fixed positioning? Well mobile browsers has not been so kind to fixed positioning, the reasons are sort of abstract complicated. Instead of getting lost in the weeds with the details lets just assume fixed positioning is broken in mobile browsers. This threw a monkey wrench at the best intended web developers, including myself.

Like I said I solved this issues several years ago utilizing absolute positioning and had sort of forgotten it was an issue. I recall about 4 or 5 years ago fighting with mobile browsers to implement experiences where I could have a fixed navigation toolbar at the bottom of the screen, yet allow my content to scroll. I also wanted to have a fixed header experience because fixed headers and footers were popularlized by many mobile native applications.

I wasted many hours trying out and reverse engineering solutions other developers and libraries utilized. They were all full of expensive JavaScript logic that often did not work or was very janky. Then I rediscovered absolute positioning and combined it with overflow scroll to create the experience I wanted.

For the past 5 years or so my applications leverage absolutely positioned flexible layouts with a fixed header and footer. Both the header and footer are absolutely positioned where the header is glued to the viewport's top, left and right sides. The footer or toolbar is glued to the bottom left and right sides.

The main content area is also absolutely positioned where the top is glued to the bottom of the header and the top of the footer. It is also stuck to the left and right sides, making it stretch with the viewport. Of course the content in each section utilizes CSS rules based on media queries, etc, but that is not important for today's lesson.

This approach creates the experience of fixed positioned elements that do not scroll as the user scrolls the content up, down, left or right. The secret to this experience is to leverage overflow scrolling and other touch CSS properties to allow the user to move the content into view. Instead of making the content scroll at the document level it scrolls within the container element.

.site-header {position: absolute;top: 0px;right: 0px;left: 0px;height: 60px;line-height: 60px;vertical-align: middle;color: #3a1b48;background-color: #d575ff;}.main-content {position: absolute;overflow: hidden;left: 0px;right: 0px;}.toolbar {position: absolute;right: 0px;bottom: 0px;left: 0px;background-color: #48195c;color: #fff;height: 35px;overflow: hidden;text-align: center;}

Summary

Flexible, responsive layouts are the web developer's best friend because they allow you to create experiences that work across all screen sizes. Leveraging absolute positioning and overflow scrolling gives you the ability to easily create layouts that rival native counterparts without relying on heavy JavaScript logic.

You can learn more about this technique and many others I employ to build modern, high performance, responsive single page web applications in my book High Performance Single Page Web Applications, available on Amazon for $9.99.

You can find the source code used in this article in Chapter 5 and on GitHub.

You can also use Toolbarjs, a library I created to manage mobile toolbar navigation a few years ago.