Difference between position absolute and relative

Hi i am new of this Forum Will you please tell me anyone answer for this question.Tell difference between absolute and relative with example.

 

This is a brilliantly delivered CSS video tutorial! It breaks down the difference between absolute and relative positioning in a way that really makes sense for anyone getting started with CSS:

 

Absolute positioning is positioning relevant to the whole document. If something is absolute positioned using #somediv {position: absolute; left: 100px;} then it will appear 100px from the left side of the page, no matter what element contains it or where it's place on the page usually is.

Relative positioning works mostly the same way, however the element is positioned relatively to where it would normally display. Using the slightly modified code above #somediv {position: relative; left: 100px;}, we can move the element #somediv 100px away from the left side of it's containing element.

Please note that Absolute and Relative positioning is usually a last resort when designing websites and that alternative methods should be considered if possible.

 

WRONG... APO is based on whatever parent element has relative positioning... with the window being the topmost.

Easiest way to explain it is to show it:

<style type="text/css">
#pageWrapper {
	margin:0 4em 0 16em;
}

.testBox {
	padding:1em;
	margin-bottom:1em;
	border:0.5em solid #F00;
}

.testBox div {
	padding:1em;
	border:0.5em solid #0F0;
}

#test2 div,
#test3 div {
	position:absolute;
	top:0;
	left:0;
}

#test3 {
	position:relative; /* apo child will be based off this DIV */
	zoom:1; /* trip haslayout, fix IE positioning bugs */
	margin-bottom:10em;
}

#test4 div {
	position:relative;
	top:4em;
	left:4em;
}

#test4 {
	margin-bottom:5em;
}

#test5 {
	position:relative; /* apo child will be based off this DIV */
	zoom:1; /* trip haslayout, fix IE positioning bugs */
	max-width:9em;
	margin-left:0.5em;
	background:#CCC;
}

#test5 div {
	position:relative;
	top:-0.5em;
	left:-0.5em;
	padding:1em;
	background:#FFF;
	border:1px solid #BBB;
}
</style>

<div id="pageWrapper">

	<h1>Positioning Demo</h1>

	<div class="testBox" id="test1">
		<h2>Test 1</h2>
		<div><pre><code>
#test1 div {
	<i>/* default positioning, aka "static" */</i>
}</code></pre></div>
	<!-- #test1.testBox --></div>

	<div class="testBox" id="test2">
		<h2>Test 2</h2>
		<div><pre><code>#test2 div {
	position:absolute;
	top:0;
	left:0;
}</code></pre></div>
	<!-- #test2.testBox --></div>

	<div class="testBox" id="test3">
		<h2>Test 3</h2>
		<div><pre><code>#test3 {
	position:relative; /* apo child will be based off this DIV */
	zoom:1; /* trip haslayout, fix IE positioning bugs */
}
#test3 div {
	position:absolute;
	top:0;
	left:0;
}</code></pre></div>
	<!-- #test3.testBox --></div>

	<div class="testBox" id="test4">
		<h2>Test 4</h2>
		<div><pre><code>#test4 div {
	position:relative;
	top:4em;
	left:4em;
}</code></pre></div>
	<!-- #test4.testBox --></div>
	
	<div id="test5"><div>
		This is a simple test to show a quick and easy offset/drop shadow style
	</div></div>

<!-- #pageWrapper --></div>

Code (markup):

The first test is the normal behavior, the DIV sits in flow and auto-expands to fill it's parent.

The second test sets aPo (position:absolute) at 0:0 top/left. Because none of it's parents have positioning, that position cascades up to BODY so that inner DIV ends up in the margin at the top.

The third test adds position:relative (and haslayout for dipshit old versions of IE) to the parent, so that the child DIV will treat 0:0 as the top/left of the parent instead of using body...

In both of those absolute positioning tests we can see one of the biggest drawbacks/dangers of absolute positioning, the element is no longer "in flow" so it's parent has NO CLUE how tall it is, which is why our red outer boxes go behind them. This is the same problem you encounter with floats going behind other elements and makes sense once you understand what flow IS and how to use it. (and to override it when needed).

The fourth test sets the inner DIV to position:relative. I like to say that browsers actually have two separate boxes used for tracking elements, the 'flow box' (how other elements relate to it) and the 'render box' (how/where it's drawn)-- certain operations can change one while leaving the other alone, and position:relative is one of those. By moving it 4em down and 4em left, we've moved where its' DRAWN, but where it's positioned in flow is left alone. So far as anything else on the page is concerned the element is in it's original position, regardless of where it's drawn!

You can actually use that to your advantage to make a cheap drop-shadow or offset box, as illustrated in test 5. The parent still keeps track of it's child's dimensions and treats it as if it has no positioning, when it is drawn at the offset shown.

Hope this helps.

 

Absolute positioning means that the element is taken completely out of the normal flow of the page layout. As far as the rest of the elements on the page are concerned, the absolutely positioned element simply doesn't exist. The element itself is then drawn separately, sort of "on top" of everything else, at the position you specify using the left, right, top and bottom attributes.

Using the position you specify with these attributes, the element is then placed at that position within it's last ancestor element which has a position attribute of anything other than static (static is the positioning elements use if they have no position attribute specified), or the document body (browser viewport) if no such ancestor exists.

For example, if I had this code:

<body>
<div style="position:absolute; left: 20px; top: 20px;"></div>
</body>

Code (markup):

...then the <div> would be positioned 20 px from the top of the browser viewport, and 20px from the left edge of same.

However, if I did something like this:

<div id="outer" style="position:relative">
<div id="inner" style="position:absolute; left: 20px; top: 20px;"></div>
</div>

Code (markup):

...then the inner div would be positioned 20px from the top of the outer div, and 20px from the left edge of same, because the outer div isn't positioned with position:static because we've explicitly set it to use position:relative.

Relative positioning, on the other hand, is just like stating no positioning at all, but the left, right, top and bottom attributes "nudge" the element out of their normal layout. The rest of the elements on the page still get laid out as if the element was in its normal spot though.

For example, if I had this code:

<span>Span1</span>
<span>Span2</span>
<span>Span3</span>

Code (markup):

...then all three <span> elements would sit next to each other without overlapping.

If I set the second <span> to use relative positioning, like this:

<span>Span1</span>
<span style="position: relative; left: -5px;">Span2</span>
<span>Span3</span>

Code (markup):

...then Span2 would overlap the right side of Span1 by 5px. Span1 and Span3 would sit in exactly the same place as they did in the first example, leaving a 5px gap between the right side of Span2 and the left side of Span3.

Hope that clarifies things a bit.​