The study of CSS on position

The default Position property values for any element are static, but we often use both relative (relative) and absolute (absolute) properties when laying out.

If you use position for layout, the position property of the parent element must be relative, and the element that is positioned somewhere inside the parent, preferably absolute, because it is not affected by the property of the parent element padding, of course, it can also be used relative, But don't forget the value of padding when you calculate it.

There are a few things to note when using relative:

1. When the element is set relative, it is positioned relative to the position of the element itself;
2. When the element is set to relative, it can change the current position of the element through "t-r-b-l", but after the element is shifted, the same point has the original physical space bit;
3. When the element is set to relative, the element will not change anywhere without any "t-r-b-l" setting.

Absolute is the third attribute value in position, and if you specify absolute for an element, the entire element floats out of the document stream, and the physical space of the element itself disappears at the same time. Unlike "relative", it has the original physical space.

"Absolute: Absolute positioning"
The default reference to the upper-left corner of the browser, with top, right, BOTTOM, Ieft (hereinafter referred to as TRBL) for positioning, with the following properties:
(1) In the case of no TRBL, refer to the upper left corner of the parent, no parent, refer to the upper left corner of the browser, no parent element, but there is text, referring to the last last text in the upper right corner as the origin but constantly open the text, covering and above.
(2) If the TRBL is set and the parent does not have a position attribute (whether absolute or relative), the default is to start at the top left corner of the browser, where the position is determined by TRBL.
(3) If TRBL is set and the parent has a position attribute (whether absolute or relative), the default is to start with the parent's upper-left corner as the origin, and the position is determined by TRBL.
The above three points we can conclude: if you want to use absolute to locate, then we need to clear two points:
First: Set TRBL

Second: Parent Setting position Property

"Relative: Relative positioning"
The default reference parent original point is the original point, and if no parent is the original point at the bottom of the previous element of the text, the mate Trbl is positioned, and the original point of the parent content area is positioned when there is a padding attribute in the parent.
(1) There is no TRBL, reference to the upper left corner of the parent, no parent, reference to the upper-left corner of the browser, no parent element, but there is text, the original point at the bottom of the text is positioned and the text is broken.
(2) Set the TRBL, and the parent does not set the Position property, the parent's upper-left corner is the origin to locate
(3) Set the TRBL, and the parent sets the position property, which is positioned as the origin in the upper-left corner of the parent, but if the parent has a padding attribute, the origin is positioned at the upper-left corner of the content area.

In summary, relative are located in the upper-left corner of the parent, but are affected by padding.

In this way, we can find out why we chose relative to locate the parent element and absolute to locate the inner element. Because we use relative after the layout, it is not just a float layout page, but also can be used TRBL layout. However, if you use ABSOlute to layout the page, all the div is positioned relative to the top-left corner of the browser, so that the compatibility will be greatly reduced and the user experience is very low. So you can only use a location where an element is positioned inside an element that has a property of absolute.

problems and workarounds caused by floating elements?

浮动元素引起的问题：（1）父元素的高度无法被撑开，影响与父元素同级的元素（2）与浮动元素同级的非浮动元素（内联元素）会跟随其后（3）若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

Workaround:
1. Additional Labeling method,<div style= "clear: both;" ></div> (Cons: But this approach adds extra tags to make the HTML structure look less concise.) )      
2. UseAfter pseudo-class #parent: After{  content:".";  Height:0;  Visibility:hidden;  display:block;  clear:both; }
3. Floating external elements
4. Set overflow to hidden or auto           

The study of CSS on position