CSS instance: positioning (position) page positioning detailed

Note: In doing this tutorial, I went on the internet to check the relevant information, read a lot of articles, do a lot of testing, and finally summed up the following text, a full article, but we need a word to see, must be careful! And for the course of the said, the best side to see, while practicing, do not learn absolutely do not understand!

Positioning (position) layout page is easy to say, just remember the last sentence of this class can be, say difficult, it is quite difficult to understand, need a certain patience, but fortunately, Kwoojan to everyone summed up already very easy to understand.

If the following text is really incomprehensible, then remember the last sentence summed up in this lesson "if you use position to layout the page, the parent element's position attribute must be relative, and the element positioned somewhere within the parent is best used differs, Because it is not affected by the padding attribute of the parent element, you can also use position, but don't forget the padding value when calculating. ”

All right, Class!
The default position values for any element are static. This class is mainly about relative (relative) and differs (absolute).

"Position:absolute"
Meaning: He means absolute positioning, he default reference to the upper-left corner of the browser, with top, right, NRC, Ieft (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, and in the absence of a parent, he is referring to the upper-left corner of the browser, and if there is no parent element, the text precedes it

The upper-right corner of the last text of the
is positioned at the origin but keeps the text open and covers the top.


2) If the TRBL is set and the parent does not set the Position property, the current differs is positioned as the original point in the upper-left corner of the browser, and the position is determined by the TRBL.


3) If the TRBL is set, and the parent sets the Position property (whether differs or relative), the upper-left corner of the parent is positioned as the origin, and the position is determined by the TRBL. Even if the parent has a padding attribute, it does not work, said the simple point is: it only adhere to a point, the upper left corner of the parent to locate the origin, the parent of the padding has no effect on it.

The above three points can be summed up, if you want to place a positional attribute of differs element in its parent element, only meet two conditions,
First: Set TRBL
Second: The parent Set Position property
The above summary is very important to ensure that you are using the Absolue layout page will not be misplaced, and with the size of the browser or the size of the display resolution, do not change.

As long as there is not enough content, the elements will be in the upper-left corner of the browser as the origin. This is easy for beginners to make mistakes, has been positioned a good plate, when the size of the browser changes, the parent element will change, but set the position property for the differs plate and the position of the parent element change, dislocation, This is because the element is at this point in the upper-right corner of the browser.

Beginners are very easy to make mistakes, is not clear position property for the differs plate, if you want to locate in the parent plate, and when the browser size changes or display resolution changes, the layout does not change, is required to meet two conditions, as long as there is no satisfaction, The element will be the origin in the upper-left corner of the browser, causing the page layout to be misplaced.

"Position:relative"
It means relative positioning, which is the original point of the default reference parent. No parent is in the order of the text flow at the bottom of the previous element as the original point, with TRBL positioning, when the parent has padding CSS properties, the current level of the original point of reference to the parent content area of the original point of positioning, The following properties are available:

1) If there is no TRBL, in the upper-left corner of the parent, in the absence of a parent, he is referring to the upper-left corner of the browser (here and differs), and if there is text in the absence of a parent element, locate the original point at the bottom of the text and disconnect the text ( Unlike 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 (and Absolut different)


3) If the TRBL is set, and the parent sets the Position property (whether differs or relative), the upper-left corner of the parent is positioned as the origin, and the position is determined by the TRBL (the first half and the Absolut). If the parent has a padding attribute, it is positioned as the origin in the upper-left corner of the content area (the second and Absolut are different).

Three points above can be summed up, regardless of the existence of the parent, regardless of whether there is no TRBL, are located in the upper-left corner of the parent, but the parent's padding attribute will affect it.
in combination with the narration of relative, we can view the position attribute as relative div as a normal div that can be positioned with TRBL, or simply add position to the CSS attributes of the div for our usual
layout page. : Relative, it is not just a float layout page, you can also use TRBL layout page, or add a
position:relative div can also be like ordinary div layout page, but also can use TRBL layout page. However, the position property is differs and cannot be
used to layout the page, because if used for layout, all the div is positioned relative to the upper-left corner of the browser, so it can only be used to position an element somewhere inside a
element that has a differs attribute. So we can sum up the more important conclusions the element that the

property is relative can be used to lay out the page, and the element differs to locate the element in the parent position

Since an element with a differs attribute is used to locate an element in the parent position, there is no TRBL, and then, according to the first differs, if the parent element does not have the
position attribute, the differs element is detached from the parent element. However, if the layout page, the parent element position properties can not be differs, otherwise it will be browse
the upper-left corner of the original point, so the parent element of the position property can only be relative!
=============================================
Summary: If you use position to lay out the page, the position attribute of the parent element must be relative, and positioned within the parent of a certain location elements, preferably with differs, because it is not affected by the padding of the parent element, of course, you can also use position, but when the time to calculate do not forget the padding value.