## 定位屬性 包括定位模式(定位的分類)和邊偏移兩部分. ## 定位模式 | 值 | 描述 | |---|---| | static | 自動定位 | | relative | 相對定位,相對于其原文檔流的位置進行定位 | | absolute | 絕對定位,相對于上一個已經定位的父元素進行定位 | | fixed | 固定定位,相對于瀏覽器窗口進行定位 | ## 靜態定位 靜態定位是所有元素的默認定位方式,當position屬性的取值為static時,可以將元素定位于靜態位置.所謂靜態位置就是哥哥元素在HTML文檔流中默認的位置.在靜態定位狀態下,無法通過邊偏移屬性來改變元素的位置. 一個原來有定位的元素通過設置此屬性,可以去掉定位效果. ## 相對定位(自戀型,不脫標) 相對定位是將元素相對于它在標準流中的位置進行定位,當position屬性的取值為relative時,可以將元素定位于相對位置.對元素設置相對定位后,可以通過邊偏移屬性改編元素的位置,但是它在文檔流中的位置仍然保留. 注意: 1. 相對定位最重要的一定是,它可以通過邊偏移移動位置,但是原來所占的位置,繼續占有,后面的盒子仍以標準流方式對待它. 2. 其次,每次移動的位置,是以自己的左上角為基點移動. ## 絕對定位(拼爹型) 當position取值為absolute時,可以將元素的定位模式設置為絕對定位.絕對定位最重要的一點是,它可以通過邊偏移移動位置,但是它完全脫標,完全不占位置. 注意: 父級沒定位 如果父級元素沒有定位,定位以瀏覽器左上角為基準點對齊(document文檔) 注意:父級有定位 絕對定位根據最近的已經定位(絕對,固定或相對定位)的父親(祖先)元素為基準點進行定位. ## 子絕父相 這句話的意思是子級是絕對定位的話,父級要用相對定位. ## 絕對定位水平居中,垂直居中 50%-自身寬度一半 ``` .father { width: 400px; height: 400px; background-color: pink; position: relative; } .son { width: 100px; height: 100px; background-color: black; position: absolute; left: 50%; margin-left: -50px; //減去自身寬度一半 top: 50%; margin-top:-50px ; } ``` ## 固定定位 固定定位只認瀏覽器,固定定位完全能脫標,不占位置,不隨著滾動條滾動. 固定定位必須要加寬度和高度,除非有內容撐開. ## 疊加次序(z-index) 使用絕對定位,會產生疊加的問題. 最后的元素會疊加前面的元素. 只需要在絕對定位的元素中添加屬性z-index,可以是正數,負數,不需要單位. 數值最大的在最上面. 默認值是0. 只有絕對定位,固定定位有此屬性.標準流和浮動沒有這個屬性. ## 定位模式轉換 跟浮動一樣,元素添加了絕對定位和固定定位后,元素模式也會發生轉換,都轉換為行內塊模式.印尼次比如行內元素如果添加了絕對頂你個為或者固定定位后,可以不用轉換模式,直接給高度和寬度就可以了