CSS Learning Notes (i): Positioning and overflow

First, positioning: position
static | Relative | Absolute | Fixed | Inherit, each value has the following meanings:

1) Static:
The element box is generated normally, and block-level elements produce a rectangular box that, as part of the document flow, creates one or more row boxes in the parent element.
2) Relative:
The element box offsets a distance, and the element retains its pre-positioned shape, and the space it occupies remains
3) Absolute:
The element box is completely removed from the document flow and is positioned relative to its containing block, which may be another element in the document or an initial containing block. The space that the element originally occupied in the normal document flow is closed, as if the element had not existed, and the element was positioned to generate a block-level box, regardless of what type of box it originally generated in the normal flow.
4) Fixed:
The element box behaves like the position is set to absolute, but its containing block is the window itself.

Second, content overflow: overflow
Visible | Hidden | Scroll | Auto | Inherit

1) Visible: element content visible, outside the element box is also visible
2) Hidden: element content is not visible outside the element box
3) Scroll: element content is not visible outside the element box, but provides scroll bar view
4) Auto: Allows the user agent to decide what behavior to use

CSS Learning Notes (i): Positioning and overflow