Common location (position) properties in CSS

List of commonly used location attributes:

Position (top, bottom, left, right), overflow, z-index

Position usage:

value	Description
Relative	relative positioning , the original position is still occupied space , relative to its normal position to locate. Therefore, "left:20" adds 20 pixels to the left position of the element.
Absolute	absolute Positioning , does not preserve the original space , and is positioned relative to the first parent element other than the static location. The position of the element is defined by the "left", "Top", "right" and "bottom" attributes.
Fixed	absolute positioning , relative to the browser window. The position of the element is defined by the "left", "Top", "right" and "bottom" attributes.
Static	The default value. No positioning, elements appear in the normal stream (ignoring top, bottom, left, right, or z-index declarations).
Inherit	Specifies that the value of the position property should be inherited from the parent element.

Position Example: http://zh.learnlayout.com/position-example.html

Overflow usage:

(Note overflow-x\overflow-y application)

The overflow property is used to set how the content is handled when it is not placed. Possible values include the following:

value	Description
Visible	The default value. The content is not trimmed and is rendered outside the element box.
Hidden	The content is trimmed and the rest is not visible.
Scroll	The content is trimmed, but the browser displays scroll bars to see the rest of the content.
Auto	If the content is trimmed, the browser displays scroll bars to see the rest of the content.
Initial	Used to set the CSS property to its default value (the initial value).
Inherit	Specifies that the value of the overflow property should be inherited from the parent element.

Z-index Applications:

The Z-index property is used to determine the order in which elements overlap. In other words, when a two-dollar overlap occurs, the Z-index value will determine which element is on top. Elements with a larger Z-index value will be placed on top.

value	Description
Auto	Default. The stacking order is equal to the parent element.
Number	Sets the stacking order of elements.
Inherit	Specifies that the value of the Z-index property should be inherited from the parent element.

Common location (position) properties in CSS