2 Days to harness div+css! Lesson Six

If you use position to lay out the page, the position attribute of the parent element must be relative, and the element positioned somewhere within the parent is best used absolute

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 lesson 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 lay out the page, the position attribute of the parent element must be relative, and the element positioned somewhere within the parent is best used absolute because it is not affected by the properties of the padding of the parent element. Of course, you can also use position, but when the time to calculate do not forget the value of padding. ”

All right, Class!
The default Position property values for any element are static, statically. This class is mainly about relative (relative) and absolute (absolute).
"Position:absolute"
What he means is thatAbsolute Positioning, he defaults to the upper-left corner of the browser, with the 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, 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 is preceded
The top-right corner of the last text is positioned at the origin but keeps writing and covering the top.
2 If the set TRBL, and the parent does not set the Position property, then the current absolute to the top left corner of the browser to locate the original point, the location will be determined by the TRBL.
3 If the set TRBL, and the parent set position property (whether it is absolute or relative), the upper left corner of the parent is positioned as the origin, and the position is determined by the TRBL. That
So that the parent has a padding attribute, it also does not work, say simple point is: it only adhere to a point, the parent of the upper left corner for the origin of the location, the parent of the padding for it is not
Effect.
The above three points can be summed up, if you want to place a positional attribute of absolute 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, not
Changed.
As long as there is a little unsatisfied, the element will be the top left corner of the browser as the origin, which is easy for beginners to make mistakes, has been positioned a good plate, when the size of the browser changes, the parent-level
The element will change, but the position of the plate and the parent element that set the position property to absolute is changed, and this is because at this point the elements are in the upper-right corner of the browser
Reason for the origin.
It is easy for beginners to make mistakes, it is not clear that the position property for the absolute plate, if you want to navigate to the parent plate, and when the browser size change or display resolution change
Change, layout does not change, is required to meet two conditions, as long as there is not satisfied with the element will be the top left corner of the browser as the origin, resulting in page layout dislocation.
"Position:relative"
It meansrelative positioning, he is the default reference to the parent of the original point of the original point, no parent is in the order of text flow at the bottom of the previous element as the original point, with the TRBL to locate, when
When there are CSS properties such as padding in the parent, the original point of the current level is positioned in reference to the original point of the parent content area, with the following properties:
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 (this is the same as the first in absolute) if there is no parent element in the
Case, the text is positioned at the bottom of the text and the text is disconnected (unlike Absolut) with the original point.
2 If the set TRBL, and the parent does not set the Position property, still in the upper-left corner of the parent as the origin of the location (and Absolut different)
3 If the set TRBL, and the parent set position property (whether it is absolute or relative), the upper left corner of the parent is positioned as the origin, and the position is determined by the TRBL (former
Half the same as 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).
The above three points 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 padding attribute will affect it.
In the face of relative's narration, 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 of our usual layout page: After relative, it is not just a float layout page, you can also use TRBL layout page, or add position:relative div can also be like ordinary div layout page, but also can use TRBL layout page. However, the position property is absolute and cannot be
Used to layout the page, because if used for layout, all div is positioned relative to the upper-left corner of the browser, so it can be used only to position an element within a absolute element, so we can summarize the more important conclusions
An element with a property of relative can be used to lay out the page, and an element of absolute is used to locate an element in its parent position
Since an element with a absolute attribute is used to locate an element in the parent position, it is TRBL, which is based on the third of the absolute, if the parent element is not
Position property then the absolute element is detached from the parent element, but if it is a layout page, the parent element position attribute cannot be absolute, or it will be the original point in the upper-left corner of the browser. So the position property of the parent element can only be relative!
=============================================
Summary: 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 absolute, becausefor 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.
=============================================
In the next class I will take the example of the 5th section to tell you how to use the position layout


This article comes from www.cssxuexi.cn * Respect others Labor achievements, reprint please consciously indicate the source!