1.HTML中的布局方式

1.1.標準流

默認的布局方式，即順序布局

HTML中有兩大元素：塊級元素(占用一行)、內聯元素(不占一行)

塊級元素標記比如：div、hn、ul、ol、table、p

內聯元素標記比如：a、span、image、input

1.2.浮動

1.3.定位

2.Position改變定位方式

（參數）

2.1.static

默認方式（標準流）

2.2.relative

相對定位

元素還處于文檔流（從上至下、從左至右）中，

但是我們可以通過left、right、top、bottom來改變元素的位置，這個時候塊元素就有了層的概念，后寫的元素將覆蓋在前寫的元素。

當設置left和top時，元素會向瀏覽器窗口的下和右移動。right和bottom則相反。

2.3.absolute

絕對定位

元素將會脫離文檔流，不會影響父級的高度。這個時候塊級元素將會擁有層級概念 。當設置元素的left、right、top、bottom時，元素在整個網頁中都將會進行移動定位的，（注意：如果沒設置，那么absolute的元素還將處在文檔流，但是不占據父級內容）在absolute中，top、right、top、bottom就會相對于父級的對應位置，而不像relative一樣。

2.4.fixed

固定定位

會脫離文檔流，用left、right、top、bottom控制（控制原理同absolute），有層概念，元素會相對瀏覽器窗口固定。

2.5.inherit

繼承父元素的定位屬性

其實就是把父元素的position屬性的值繼承過來。其他不繼承。

3.層級

擁有層級關系的元素有z-index屬性。其屬性值越大，越在上面。當父元素大于其他元素的時候，子元素無論無何都回大于其他元素。