Relative and absolute positioning in CSS


CSS positioning of elements is really sometimes confusing but is very easy to understand. Lets start with static position.
Static position is default for any element on a Web page. If position of element is not defined , it will be static and would display inside the normal flow of the page.

If you try to apply rules like top , bottom , left or right to static element , will be ignored.

Absolute Positioning

This is the easiest property to learn and understand. When absolute position is applied to an element it is taken out from the normal flow of document and is positioned to defined top ,left, bottom or right of the body.

Consider the following HTML code:

<div class="container">
	<div class="normal">This is normal text block </div>
	<div class="normal">This is normal text block </div>
	<div class="normal">This is normal text block </div>
	<div class="demo-position">This is an absolute block </div>

and its CSS as:

.normal, .demo-position{padding:10px;border:1px solid #000;background:#ccc}

Here is the output:


Relative positioning
Relative positioning uses the same four positioning properties as absolute positioning. But instead , it starts from where the normal flow of the element.

Most important thing is to note that if absolute element is inside relative element, it consider relative element as its parent element and will positioned accordingly.

Lets make little addition in above CSS. We will simply add “position:relative” to div container

.normal, .demo-position{padding:10px;border:1px solid #000;background:#ccc}

and find out the change as :

You will find absolute positioned div is now inside div container which was positioned relative.

isn't it was easy?

That's it!!

Recently Published


Web Development Vs. Software Development: What Is the Difference?

As technology continues to transform all aspects of our lives, a lot ...


Web Redesign : Is Your Landing Page Begging for one?

How do you know when it’s time to web redesign your landing page? ...


Customer Acquisition: Few Steps To Improve This.

Customer acquisition is essential to any business’s success — to ...


Mobile App Development Tools: 5 Enterprise-Ready For Rapid Deployment

There are several enterprise-ready mobile app development tools for ...


Docker: How To Build Better Development Security With It

The top concern among developers and DevOps teams is security within ...


Mobile Development: How to Reduce Costs

Modern markets have become so competitive that it has become vital ...


Know-How DevOps Benefits Your Business

The organizations in this current fast-paced environment need to ...


10 Best Prototyping Tools for UI/UX Designers

Website design for a client gets only successful if you follow their ...


Social Media Marketing: Strategy To Boost Ecommerce-Traffic

According to a recent study, the experts revealed that people aged ...