CSS POSITION
This property determines whether normal, relative or absolute positioning methods are used to render the current element box.
Example
h2 {
display: block;
position: absolute;
top: 20px;
right: 50px;
bottom: 20px;
left: 50px
}
text
Possible Values
inherit: Explicitly sets the value of this property to that of the parent.
static: This is the default positioning scheme, where elements are rendered in order, as they appear in the document flow. The ‘top’, ‘left’, ‘right’ and ‘bottom’ properties have no effect if this value is set.
relative: The element’s normal document flow position is calculated as if the element had a ‘position’ value of ‘static’. It is then offset from this position according to the ‘top’ and ‘left’ properties. Any elements that come after this element will be laid out as if the element had not been offset (a phantom height and width for the element is reserved in the normal document flow.)
absolute: This specifies that the element box be absolutely positioned using the ‘top’, ‘left’, ‘right’ and ‘bottom’ properties. These values use the element box’s containing block as origin. Absolutely positioned elements do NOT exist in the normal document flow like relatively positioned elements are – elements that follow will flow as if the absolutely positioned element does not exist.
fixed: This value behaves like ‘absolute’ in all respects, but additionally, the positioned element box is fixed with respect to a reference point. In scrolling media, it is in reference to some fixed point on the screen; in paged media (printing) it will be in reference to a point on the page. The positioned element will not move with respect to that stationary point (eg, it will not moved when, say, the screen is scrolled.)
6 Responses
Beginners should note, that when positioning elements using the absolute value, they are positioned relative to the nearest positioned ancestor.
If aiming to position these elements relative to an ancestor, or parent. You should apply position:relative; to the ancestor, otherwhise the positioned element'(s) end up being positioned twords the initial containing block, or the viewpoint itself.
Positioning is one of the best ways to layout pages, along side, with float based layouts.
what is the difference between relative and absolute?
i don’t understand what is this… relative and absolute
@Sim, u need play with it, or check live demos on the web… =)
There are browser compatibility issues when using position:absolute, specifically between Firefox 3.x and Internet Explorer 7 and IE 8.
Well, as I read it, this is the same rule as css2, it that true o somethings have changed?
can any one explain is width=100% width=100 same?