Vikas's Blog A Tech Blog

To create simple overlays without help of any help of readymade jQuery plugin or third-party library we need to use CSS to achieve that.

Steps to make overlay with CSS

1. Create <div> node and make it absolute to DOM (document object model)
2. Assign it property top and left = 0.
3. Apply width and height 100%
4. Finally set z-index > 0

So <div> will overlay entire document. Now let’s make div centered different way.

Method 1:- Making overlay div center with css top, right, bottom and left property.

HTML

CSS

Above method will set div position 50px from all corner and margin auto will make this div centered.

Demo –

Method 2: Making overlay div with css margins.

HTML

CSS

Above method will set overlay <div> to top,left =0 position and then set it’s margin auto.

Demo:-

Method 3:- relative div inside absolute div

HTML

CSS

In above example there are two nested <div>.  The parent one is absolute to DOM while child <div> is relative to it. So, parent is made 50% left to the viewport first. Then half of the child div’s wide is taken as offset to move it right. i.e. left:-50%

Demo –

Method 4:- absolute div inside relative div

HTML

CSS

In above example there are two nested <div>.  The parent one is relative to DOM and set it to top,left = 0. Child <div> is absolute to it. It’s set to 50% left to document and then shifted right to half of its width.

Demo: – 

Method 5:- lightbox overlay div

To make above code practical, let’s change absolute and relative order and add one semi transparent background.

Demo:-