A Comprehensive Overview On Positioning In CSS

If you have ever come to encounter with the CSS-based layouts that you must be aware of its ability of giving facility to position content and its various elements on a page in the most impressive manner. This way it gives structure to our design and direct us in displaying content in an incredible way.

There are a handful number of different types of positioning in CSS, each of them boasting their own set of application. For instant, ability to let the component float from one part to another, designing a clean layout which can work in tune with different elements on a web page. Although, there are situations when a more strict control is emphasized, and then different techniques are used such as relative positioning and absolute positioning.

In this article, we’ll start by taking a look at how CSS positioning property is used. We’ll cover the topic of CSS positioning in detail and hopefully you find the article helpful for your future use.

Various Properties of Positioning

There are situations when you need to establish a firm control over the elements, more than a float can offer, in such kind of a scenario ‘Position’ property becomes dominant. The position property is normally receptive of five different values, each of them have their own ways of assigning positions to every element.

1. Static Positioning

By default, elements have static positioning, meaning they neither have nor they will accept, any element related to the box model. Further, elements will remain fixed to the positions they are intended to, and also give demonstration of their default attributes.

Static Position

In the below mentioned example, you can see all the elements are fixed to their position and they are not floating to any other direction.

HTML

CSS

2. Relative Positioning

Although, the position ‘relative’ is a bit similar to the position ‘static’ to an extent but still there is a slight difference between them. The relative positioning accepts the box offset properties which aren’t accepted by the ‘static’ positioning. These offset properties let the elements contained under the relative positioning to move from their default positions in any direction.

Note: Box offset properties are those properties which specify the positioning as well as direction of different elements. These properties only work with elements with positioning value relative, absolute and fixed.

Although, the relative position accepts box offset properties, the elements still remain in their normal or static flow of the page. Moreover, these elements have the power to overlap, underlap, other elements without hindering their default positions.

Relative Position

In the following example, you’ll observe that the elements are neatly arranged over one other, however, they have been shifted to their default positions as per the values of their box. These are the values which are responsible for making the elements overlap each other, without obstructing their original positions.

HTML

CSS

3. Absolute Positioning

An element is set to be an ‘absolute’ when it accepts box offset properties, while removing its normal flow of the document. When elements are removed like this, they acquire a position which is directly related to their parent, which are either positioned directly or relatively. The elements with the absolute positioning behavior are presented as per the body of the page. Furthermore, since they are removed from their normal flow, this created a space which is further occupied by the surrounding elements and these elements start behaving in their own way completely ignoring the presence of absolute positioned elements.

The absolute positioning also specifies horizontal and vertical offset properties for the elements and thus help them shift these values in relation to their relatively positioned elements.

In addition to this, using an absolute positioning and not specifying any of the box offset properties will position the element at the top left of its closest relatively positioned parent.

Absolute Position

In the example below, you can observe each box is positioned as per the absolute quality in relation with their parent division. Each of the box has been moved to a specific side with a positive value, or pulled out with a negative value.

HTML

CSS

4. Fixed Positioned Elements

Fixed positioned elements are also a part of ‘absolute positioned elements’, displaying the same behavior of absolute elements. but with two key differences. Firstly, the behavior positioning is relative to the viewport, so that the context doesn’t changed by adding “position:relative” to the parent element. Secondly, the positioning of these elements don’t display any change when the page is scrolled. The only limitation with ‘fixed positioned elements’ is that they are not compatible with the Internet Explorer. However, if you really want to go for it then some hacks are available for this.

Fixed Position

Here is an example of fixed positioning:

HTML

CSS

Wrapping Up

Learning the ways of positioning CSS is a logical step toward mastering the way you style a document. Getting the grips of it, we will be surely on our way of becoming competitive front-end developers.