[TOC] >[info]CSS 為定位和浮動提供了一些屬性，利用這些屬性，可以建立列式布局，將布局的一部分與另一部分重疊，還可以完成多年來通常需要使用多個表格才能完成的任務。 定位的基本思想很簡單，它允許你定義元素框相對于其正常位置應該出現的位置，或者相對于父元素、另一個元素甚至瀏覽器窗口本身的位置。顯然，這個功能非常強大，也很讓人吃驚。要知道，用戶代理對 CSS2 中定位的支持遠勝于對其它方面的支持，對此不應感到奇怪。 ### 相對定位 >[danger]相對定位是參照元素原來的位置進行移動，元素原有的空間位不變，元素在移動時會蓋住其他元素。 ~~~ <style type="text/css"> p {position: relative;} </style> ~~~ ### 絕對定位 >[danger]絕對定位是元素完全脫離文檔流，頁面中的其他元素視他不存在，也就是說絕對定位元素不會影響到其他元素。 ~~~ <style type="text/css"> p {position: absolute;} </style> ~~~ ### 固定定位 >[danger]固定定位是元素完全脫離文檔流，參照于可視區域，固定在可視區域中。 ~~~ <style type="text/css"> p {position: fixed;} </style> ~~~ ## 關于定位的說明 * 相對定位是參照元素在空間中的原有位置。 * 絕對定位是參照距離他最近的有定位屬性的父級元素，如果父級元素沒有定位屬性，則會參照文檔。 * 一般我們設置絕對定位時，都會找一個合適的父級將其設置為相對定位，不過最好為這個具有相對定位屬性的 父級設置寬高這樣在各個瀏覽器中表現不會出現問題。 ## 層級Z-index * 定義屬性是脫離文檔流的，也就是說他有可能蓋住其他元素。 * 如果有多個定義屬性存在，那么相互間就會存在遮擋的情況。 * 可以通過修改元素的Z-index屬性來設置元素疊放的層 次，z-index值越高就會越在最上面。 ~~~ <style type="text/css"> p{z-index: 999;} </style> ~~~ >[danger]**作業：**理解定位的原理，分別練習三種定位用途，把定位運用在開發中。