定位

不定位

• position：static;

相對定位

• position:relative;

• 啟用屬性

  • top

  • bottom

  • left

  • right

  • 位移參考於原本的位置

  • 特性

  • 不會脫離文件流

  • 對元素本身沒有影響

  • 如果同時設定了 top 和 bottom

  • top會生效

  • left 和right left生效

絕對定位

• position：absolute;

• 啟用屬性

  • top

  • bottom

  • left

  • right

  • z-index

  • 控制層次

  • 注意：

  • 可以設定負數

  • 一旦設定了負數，這個內容就無法被點選了

• 特性

  • 提升層級一級

  • 脫離文件流

  • 使不支援寬高的元素重新支援寬高

  • 如果沒有設定寬度，由絕對定位元素的內容去撐開寬度

• 絕對定位位移參考於，離他最近的設定了定位的父級

固定定位

• position：fixed;

• 和絕對定位幾乎是一樣的

• 固定定位參考於整個螢幕

• opacity

  • 透明度

  • 書寫範圍；0 ~ 1

  • 0是完全透明

  • 1是完全不透明

關於浮動，絕對定位，相對定位的總結

• 絕對定位和相對定位都可改變元素在文件流中的文職，同時啟用 top ， right， bottom ， left 。 這四個屬性在未啟用之前是可書寫的，但是介面中沒有效果。 z-index 在未設定之前，預設全部是 auto。

• 網頁雖然看起來是二維結構的，但是實際上他是存在 Z 軸的， Z 軸的大小由 z-index 決定。預設情況下，所有元素全部是處於 z-inidex = 0 這一層。元素可通過自己的display 型別， 長寬，內外邊距等屬性來進行排列。而 z-index = 0 這一層，我們稱之為 文件流。

• 浮動 和 絕對定位 都會使元素 “浮” 起來，也就是脫離了 z-index = 0 這一層。他們能夠改變正常狀態下文件流內容的佈局。 但是需要注意，絕對定位會使當前元素完全脫離文件流，而浮動只是“半脫離”。

• 相對定位雖然也可以改變元素的位置，但是他在文件流中還是佔有位置的。