Learn more about the Position property in CSS

Do not know, see I write front-end knowledge of the program, there is no feeling like me, every time I write the HTML structure, and then write CSS style content, the heart has a look, but the realization, Ctrl+save is another appearance, the heart is really uncomfortable ah.
For position this attribute, every time I set him up, it will be more or less a bit unexpected.
Interview two or three times, but did not ask this, the heart still have a lucky mentality.

• Position
  This property has a total of four values.

• Static statically positioned
  The default layout. Block-level elements stack up top-down in the page. If the inline element will be left to right in one row, it will wrap if it does not fit and continue.

• Relative relative positioning
  Causes the element to be positioned relative to his original position in the document. Change its position by the top, left, bottom, and left four attribute values.
  The above is also very well understood.
  " This is a bad idea here: relative positioning of the element preserves the document flow space that the element originally occupies. When relative positioning of the element, such as top:20px, causes the element to be 20px away from the top of the space he originally occupied. That is, the element moves down by 20px, but the other elements on the page have not changed in addition to the element moving a certain distance. "

• Absolute absolute Positioning
  Absolute positioning is completely taken out of the document stream, and the space occupied by the element is recycled. The positioning of an absolutely positioned element depends on its positioning context.
  It is important to note that absolute positioning can be used to make inline elements a representation of block-level elements. But be sure that once the inline element is absolutely positioned, the position of the element is not good, (cause: If the element does not have an internal and external margin, and there is no absolutely positioned element around the left and right side, then the element will temporarily remain in its original position, but if the element is set with margins, Then the element will temporarily remain in the distance from the original position of an outer margin. If he or she is setting an absolutely positioned element, then the element will look for the topmost element that is not absolutely positioned. < have no regrets to hear the reason >) so, a little bit that set the absolute positioning needs to immediately for the element top, left positioning.

  Understanding of the positioning context:
  The position of the anchor element is moved relative to another element, and the "other element" is the positioning context of the element.
  Any ancestor element of an absolutely positioned element can be his location context, just set the corresponding ancestor element to position:relative;
  If none of its ancestor elements are set relative to positioning, the default positioning context for that absolute element is body.

• Fixed positioning
  Absolute positioning is also a complete removal of the document flow. But his positioning context is the viewport, which is the browser window.
  Fixed positioning is not commonly used, and the most common scenario is to use it to create a navigation that does not scroll with the page and move.

I'm doing the exercises, and the most used is to position the parent element relative to the location, and then to absolutely position the child elements to be positioned.
Although some Web pages also have a parent element that is absolutely positioned, and the child element is absolutely positioned relative to the parent element, I'm not too fond of writing because the parent element's position needs to be repositioned again.

"Recommended"

1. Free CSS Online video tutorial

2. CSS Online Manual

3. php.cn Lonely Nine-base (2)-css video tutorial