CSS Position properties: differences between absolute and relative

If you usePosition to layout the page, the position property of the parent element must be relative, and the element that is positioned somewhere inside the parent is best used with absolute because it is not affected by the parent element'sPadding properties, of course you can use position, but do not forget the value of padding when calculating. "

The default Position property value for any element is static. Today 51RGB Q Group 186242343 mainly speaks relative (relative) as well as absolute (absolute).

"Position:absolute"
It means : He means absolute positioning, he is by default referring to the upper left corner of the browser, with top, right, BOTTOM, left (hereinafter referred to as TRBL) for positioning, with the following properties:
1) If there is no TRBL, in the upper left corner of the parent, when there is no parent, he refers to the upper left corner of the browser, if there is no parent element in the case of the existence of text, then the last text in front of it to the upper right corner of the original point for the location but constantly open text, covered above.
2) If you set TRBL, and the parent does not set the Position property, the current absolute is positioned as the original point in the upper left corner of the browser, and the position is determined by TRBL.
3) If you set TRBL, and the parent sets the Position property (either absolute or relative), it is positioned as the origin in the upper-left corner of the parent, and the position is determined by TRBL. Even if the parent has the padding attribute, it does not work, saying simple point is: it only adhere to a point, the upper left corner of the parent is the origin of the location, the parent's padding has no effect on it at all.

The above three points can be summed up, if you want to set a positioning attribute to absolute element in its parent element, only meet two conditions,
First: Set TRBL
Second: Parent Setting position Property
This summary of the above is very important to ensure that you are using Absolue layout page, not dislocation, and with the size of the browser or the size of the display resolution, without change.
as long as there is a little unsatisfied, the element will be in the upper left corner of the browser as the origin, this is a beginner easy to make mistakes, has positioned the plate, when the size of the browser changes, the parent element will change, but set the Position property is

The position of the absolute plate and the parent element is changed, and this is because the element is the origin in the upper-right corner of the browser at this point.
Beginners are very easy to err is, do not know the Position property for the absolute plate, if you want to locate the parent plate, and when the size of the browser changes or the resolution of the display, the layout does not change, it is necessary to meet two conditions, as long as there is a little unsatisfied, The element will be the origin in the upper left corner of the browser, causing the page layout to be misplaced.

"Position:relative"
meaning relative positioning, he is the default reference to the parent's original point as the original point, no parent in the order of the text flow at the bottom of the previous element as the original point, with TRBL to locate, when the parent has padding and other CSS properties, the current level of the original point of reference to the parent content area to locate the original point, Has the following properties:
1) If there is no TRBL, in the upper-left corner of the parent, when there is no parent, he refers to the upper-left corner of the browser (as in here and absolute the first bar), if there is no parent element in the case of text, then the bottom of the text for the original point is positioned and the text is broken ( different from Absolut).
2) If the TRBL is set, and the parent does not set the Position property, it is still positioned as the origin in the upper-left corner of the parent (unlike Absolut) .
3) If you set TRBL, and the parent sets the Position property (either absolute or relative), it is positioned as the origin in the upper-left corner of the parent, and the position is determined by the TRBL (the first half and the Absolut). If the parent has the padding attribute, it is positioned as the origin in the upper-left corner of the content area (the second half and Absolut are different).

The above three points can be summed up, regardless of whether the parent exists, regardless of whether there is a TRBL, are located in the upper left corner of the parent, but the parent's Padding property will affect it.
comprehensively on the face of relative narrative, we can position attribute to relative p as can be used to locate the normal P TRBL, or as long as we usually layout page of the CSS properties of P plus position:relative , not just with float layout page, can also use TRBL layout page, or add position:relative p can also be like normal p for layout page, but also can use TRBL layout page. However, the position property is absolute and cannot be used to layout the page, because all p is positioned relative to the upper-left corner of the browser, so it can only be used to position an element in the interior of an element with the property absolute, if it is used for layout. So that we can summarize the more important conclusion since the element of absolute is used to locate an element in the parent position, it is necessary to TRBL, this time according to the first absolute of the third article, if the parent element does not have
The position property then absolute the element out of the parent element, but if it is a layout page, the property of the parent element position cannot be absolute, or the upper-left corner of the browser is the origin, so the parent element's position property can only be relative!

An element of the relative property can be used to lay out a page, and an element with a property of absolute to position the element in the parent

Summary: If you use position to layout the page, the parent element's position property must be relative, and the element that is positioned somewhere inside the parent, preferably absolute, because it is not affected by the padding properties of the parent element. Of course you can also use position, but do not forget the value of padding when calculating.
but the location (position) has a disadvantage, does not adapt to the height of the internal elements, so we usually in the layout of the page, if some or some of the module height will never change, you can use positioning, but the sail suggested that everyone layout page, or to float-based, Position Supplement! So that you can make high-quality pages.

Finally, please remember me this sentence: "Layout page, float-based, position supplemented!" ”