Relative positioning and absolute positioning in CSS Web pages

css| Web page

In CSS there is an instruction like this: (position)

Translated as "positioning" in the DW Chinese version, the commonly used attributes are relative (relative) and absolute (absolute).

A lot of friends are still not clear about the use of this instruction, here do some meticulous explanation:

position:relative; Indicates relative positioning, where the label of the attribute can be moved up or down in the range of the property in which the movement is not the same as the position change produced by the padding or margin. Padding and margin are the elements themselves a kind of margin and padding distance is not really moving, and the element defined as relative is real movement, which produces a moving distance from the periphery of margin to the inside of the parent label.

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

Then there is a problem, and now we do most of the Web page is centered, then I need this element to follow a page in the location of a certain element regardless of the resolution of his position is always on the page of an element, so simple absolute is not.

The correct solution is to define the element's parent element as position:relative; (correction: This can be a grandparent, or it can be a position:absolute; thank old9 for the proposal) the element that requires absolute positioning is set to position: absolute;

This then set the value of the top,right,bottom,left can be, so that its positioning of the reference standard is the upper left corner of the parent padding the upper left side!