Liquid Web Managed Word Press

Relative and absolute positioning in CSS

absolute

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:

1
2
3
4
5
6
<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>
</div>

and its CSS as:

1
2
3
.container{margin:120px;}
.normal, .demo-position{padding:10px;border:1px solid #000;background:#ccc}
.demo-position{position:absolute;top:0;left:0;background:#eee;}

Here is the output:

absolute

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

1
2
3
.container{margin:120px;position:relative}
.normal, .demo-position{padding:10px;border:1px solid #000;background:#ccc}
.demo-position{position:absolute;top:0;left:0;background:#eee;}

and find out the change as :
relative

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

isn't it was easy?

That's it!!
Cheers!

Recently Published

»

Java Programming Language And Its Application

Programming language is one of the main IT developments of the past ...

»

Why Can’t I Add or Install Plugins in WordPress

WordPress is a great choice when it comes to Content Management ...

»

5 Website Security Myths You Should Know About

Businesses today are getting increasingly dependent on their ...

»

Capturing HD Videos with Movavi Screen Capture Studio

As you probably know High Definition (HD) videos are regarded as the ...

»

Modern Changes That You Should Consider for Your Web Site

Websites need to modernize and get updated periodically otherwise ...

»

Super Tips For A Flawless Website

A website has a specific purpose. And your job is to design a website ...

»

Wix Offers Best Free Web Apps for Artists and Photographers

The famous online website builder Wix is known for providing the ...

»

What You Should Know Before Setting Up a Digital Marketing and Web Design Company

Running a digital marketing and web designing company can be a ...

»

Important Factors to Think About When Starting a Mailing List

Many bloggers and business owners don’t have a mailing list, ...