CSS Positioning

1. Positioning Property

block:This makes the element a block box. It won't let anything sit next to it on the page! It takes up the full width.

inline-block: This makes the element a block box, but will allow other elements to sit next to it on the same line.

inline:This makes the element sit on the same line as another element, but without formatting it like a block. It only takes up as much width as it needs (not the whole line).

none:This makes the element and its content disappear from the page entirely!

2. Margin, Border, and Padding

• 2.1 Margin

margin: auto;

margin-top: top-var;

margin-right: right-var;

margin-bottom: bottom-var;

margin-left: left-var;

margin: top-var right-var bottom-var left-var;

• 2.2 Border

border: 4px solid #ff0000;

• 2.3 Padding

padding: top right bottom left.

3. Floats

float: left 与左边的elment无重叠

float: right 与右边的elment无重叠

float: both与上/下面的elment无重叠

4. Position

position:absolute : 定位到与父element位置的绝对距离

position:relative : 定位到与本身之前位置的绝对距离

position:fixed 位置固定不动

z-index: 设置element的堆叠顺序，值越大堆叠越在上面

（完）