Relative positioning and absolute positioning in CSS Web pages

There is one such directive in CSS: (position), translated to "positioning" in the Dreamweaver Chinese version, there are two commonly used attributes: relative (relative) and absolute (absolute). There are a lot of friends on the use of this instruction is still unclear, here to do some detailed explanation.

position:relative; Indicates relative positioning, the label that is positioned for this property can move up or down in the range of its own, where the movement is not the same as the change in position of the padding or margin. Padding and margin are a margin of the element itself and the padding distance is not really moving, and the element defined as relative is really moving, and the resulting moving distance is from the perimeter of the margin to the inner part of the parent label.

Position:absolute; Represents absolute positioning, if an element of this attribute is defined, its position is calculated based on the 0 point in the upper-left corner of the browser, and is above the floating normal element. Then you can use this property when you want an element to be positioned somewhere in the browser's content area.

So there is a problem: now we do most of the Web page is centered, if I need this element to follow the page of an element location, regardless of the screen resolution is how much of its position is always for an element in the page, by simple absolute is not.

The correct solution is: the element's parent element is defined as position:relative; (this can be a grandparent or a position:absolute;) the element that requires absolute positioning is set to Position:absolute;

This sets the value of the top,right,bottom,left so that the reference standard for its positioning is the upper left side of the upper-left corner of the parent padding.

Relative positioning and absolute positioning in CSS Web pages