Relative positioning and absolute positioning in CSS

CSS in CSS has such a directive: (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 this property is positioned to go up and down in the range that it belongs to

Shift around, where the movement is different from the position of the padding or margin. Padding and

Margin is a kind of margin and padding distance of the element itself is not really moving, and the element that is defined as relative is

Real movement, which produces a moving distance from the perimeter of the margin to the inside of the parent label.


Position:absolute; Represents absolute positioning, and if the element of this attribute is defined, its position is based on the top left of the browser

The 0 point of the angle begins to compute and is above the floating normal element. So when you need an element positioned in the browser content

This property can be used somewhere in the area.


So there's a problem, now that most of the pages are centered, then I need this element to follow the page

The position of an element in is no matter how much the resolution is. His position is always for an element within the page, so the simple

Absolute is not a good way to go.


The correct solution is to define the element's parent element as position:relative; (correction: This could be grandpa.

Level, can also be position:absolute; thank old9 for the proposed) the element that needs 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!


We can try, if there is a problem, please follow the thread forward! Thank OLD9 for correcting the content.