what is difference between relative position and absolute position is CSS eg .style { position:relative; }
.style { position:absolute; }
+3
A:
The standard describes it here: Comparison of normal flow, floats, and absolute positioning
Is there something in particular about this which you don't understand or want explaining further?
ChrisW
2010-05-31 08:52:42
+2
A:
From W3schools:
Absolute
Generates an absolutely positioned element, positioned relative to the first parent element that has a position other than static. The element's position is specified with the "left", "top", "right", and "bottom" properties
Relative
Generates a relatively positioned element, positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position
Also check this page, it will give you very nice overview about positions in CSS.
Ondrej Slinták
2010-05-31 08:53:32
+1
A:
With relative you can position the element relative to its original position and the original space is still holding the item.
Absolute takes the item out of the regular flow of the HTML and you can position it relative to the parent element.
red-X
2010-05-31 08:54:34
Relative to the parent element? That's incorrect.
Philippe Leybaert
2010-05-31 08:58:14
@Philippe Leybaert: not necessarily - if the parent-element has position:relative/absolute/fixed, absolute positioning will be relative to the parent-element.
oezi
2010-05-31 09:05:29
Relative to the first parent element that is positioned in any way, if there is none, it will be relative to the body element
red-X
2010-05-31 09:17:27
+1
A:
Here is a good tutorial about that:
http://jimbojw.com/wiki/index.php?title=Position_absolute_is_really_relative%3F
Sarfraz
2010-05-31 08:56:53
+1
A:
Use relative when you consider range to parent element or elements before.
Use absolute when you want to make an element in inviolable position.
You can also learn the difference between margin-left and left css property for relative and absolute
<html>
<body>
<div style="width:300px; height:200px; margin:auto; background:red">
<div style="position:relative; left:10px; top:20px;">
test
</div>
<div style="position:relative; left:10px; top:20px;">
test
</div>
<div style="position:absolute; left:0; bottom:0px;">
test
</div>
<div style="position:absolute; margin-left:0; margin-bottom:0px;">
test
</div>
</div>
</body>
Jeaffrey Gilbert
2010-05-31 09:04:47