UI Development

CSS POSITIONING

 

A important component of creative website is layout and with CSS properties like position, advanced layouts are possible. Even for a basic webpage, elements need to be aligned properly. Knowing how to position the elements on the page can save time because as the project gets bigger more alignment issue arises.

CSS position property allows you to virtually align the elements where you want them for a specific design. Using positions, we can manipulate the elements and achieve different layouts.

GET WITH THE FLOW

Just like in real world, In CSS, we work within boundaries called Normal Flow, or Flow Layout. In real world if we place one block on other, these blocks follow the law of gravity. Normal flow in CSS is similar to law of gravity. In normal flow, the elements appear from top to bottom, order in which they are added in a markup one element after another. However, we can give these blocks in our markup “superpower” to break the law of gravity or their normal flow using positions.

There are 5 positions:

  1. Static
  2. Relative
  3. Absolute
  4. Fixed
  5. Sticky

STATIC: (nothing new here) 

It is the default property of position. HTML flows normally from top to bottom. Position static does not change the flow of the content. We cannot use top, bottom, left, right properties with position static.

Example:

HTML:

Screenshot 2020-03-31 at 2.28.37 PM.png

CSS:

Result:

As static is the default property, the div with position static will behave as if no property value is assigned to them. The divs will stack on one another.

RELATIVE POSITION (hidden superpowers)

When an element is given position relative, they behave like statically positioned elements but can be moved from its natural position. It renders the element like it would look without any position value.

In other words, elements with relative position values are like Clark Kent(superman), they hide their powers from their static elements.

Elements will take the same width it is supposed to take and can be adjusted to any position. They reveal their superpowers only when used with 4 properties – top, bottom, right, left.

If there are any other elements, they are not affected by position relative.

Example:

HTML:

CSS:

Result:



Block 1 is position relative, it is moved from its original place to 100px left.

 

ABSOLUTE POSITION (anytime, anywhere

An element with position absolute is completely removed from natural flow of the document and similar to position relative can be used with top, bottom, right and left property to get the element into desired position.

If elements with position relative can be compared with superman then elements with absolute value can be compared with Inception – a place where you can design your own world.

As the element with position absolute is removed from its natural flow. This means the space taken originally by that element will not be considered. All the elements in the document will behave as element is not there (it has superpower to be “invisible”)

Example:

HTML:

CSS:

Result:

Block 2 is position absolute, it is taken out of the document flow and because of that block 1 behaves as if block 2 is invisible.  

FIXED POSITION (freezes there)

Fixed positioning is just like absolute but is positioned relative to the viewport. Fixed position is like “Iceman”, it has the ability to freeze the element. If an element is given position fixed and top value 200px, it will be positioned 200px from top of the viewport. If we try to scroll, it will still be FIXED to 200px from the viewport.

It is commonly used with fixed footer and headers.

Example:

CSS:

Result:

Before scroll

After scroll

Div is always fixed to the bottom on the viewport.

STICKY POSITION (fixed + relative)

Element with position sticky behaves like position relative but if we keep scrolling it gets out of the normal flow and behaves like position fixed and sticks wherever you have positioned it.

Example:

CSS:

Result:

Before Scroll

After Scroll

Browser support:

CONCLUSION 

Occasionally, we need more control over position of an element in the document than CSS “float” property can provide. To achieve complex layouts and specific positioning of an elements Positions can be useful. Position property sets how an element will be precisely placed in the document.

Reference Link:

https://caniuse.com/#feat=css-sticky for browser support information.

About The Author