Reprinted from: (http://www.cftea.com/c/2009/01/84CEP6T7Q4BYZ1OZ.asp)
position has five values: static, relative, absolute, fixed, inherit.
static
is the default value. It is to follow the normal layout flow from top to bottom and from left to right. Usually, when we make web pages, we do not specify position, which means that we use static.
relative
Without breaking out of the layout flow , you can use the top, right, bottom, and left properties.
- When top and bottom coexist, use the top value and ignore the bottom value;
- When left and right coexist, the left value is used, and the right value is ignored;
relative is a relative position, which refers to the position relative to the element's position when it is static :
- How many pixels to move top down relative to static (or up if top is negative).
- Right is how many pixels to move left relative to static (or right if right is negative).
- How many pixels to move bottom up relative to static (or down if bottom is negative).
- Left is how many pixels to move to the right relative to static (left if left is negative).
After using relative:
- The original space will not be crowded by other elements.
- When the element is in its final position, it doesn't crowd out the space of other elements, it floats on top of other elements.
absolute
Out of the layout flow , you can use top, right, bottom, left, but these properties are no longer relative to the static position, but relative to the containing block, relative to the inner edge of its border, not its padding. edge .
After using absolute:
- The original space will be crowded out by other elements.
- When the element is in its final position, it doesn't crowd out the space of other elements, it floats on top of other elements.
fixed
Its mode is the same as absolute, but no matter how you drag the scroll bar, it is always fixed at the specified position on the screen. This property is not supported in IE6; it is supported in IE7 but DOCTYPE needs to be specified; browsers such as Firefox support this property.
The top, right, bottom, and left properties are relative to the viewport .
inherit
Continues the position value of the parent element.