CSS Absolute Positioning: Creating a Quick Search Form

If you ever thought that absolute positioning was a pretty useless property of CSS, with little or no functionality in the real world, I think you should reconsider your opinion and change your mind. When coupled with a relative position, the property can be really helpful in the construction of certain common interfacing components, such as tooltips, web forms and dynamic navigational bars, among others.

What’s more, to demonstrate that the combination of relative and absolute positioning actually yields satisfactory results in modern web design, in the first part of this series I went through the development of some basic CSS-based tooltips which used this combination to work as expected. Essentially, the whole development process was reduced to first defining a bunch of relatively-positioned containers, and then creating their associated tooltips, which were absolutely placed with reference to the containers in question. It was that easy, really.

As I just mentioned, though, absolute positioning can be successfully used in a few other situations as well, including the creation of elements in fixed layouts. A typical example of this is the implementation of a quick search form, which in most cases is placed in the top/right corner of a web page. Naturally, there are many approaches that can be used for building a web form like this. For illustrative purposes, however, in this second episode of the series I’m going to show how to tackle this process by using the relative/absolute positioning tandem referenced a moment ago.

With the goal of this tutorial already set, it’s time to start showing another practical example regarding the use of absolute positioning in CSS. Let’s get started!