[TOC] ## absolute概要 眾所周知absolute能讓一個元素依據它的定位父級進行定位，如果沒有定位父級**則會根據視口來進行定位**。 ### absolute與視口 沒有定位父級的時候，絕對定位的元素是以視口為定位基準的而**不是**html。 #### 示例1  ### absolute與fixed fixed定位的祖先元素也能作為absolute的元素的定位基準 #### 示例2  ### absolute與display absolute的元素和float后的元素一樣，瀏覽器都會隱形的將元素轉換成`block`級別  ## absolute的伸縮特性 一般我們為一個元素設置寬高無外乎兩種方式： - 通過`px`直接在元素身上設置 - 通過`%`根據父容器的大小來設置 而利用absolute的伸縮特性，也能幫助我們為元素設置寬高。 ### 最大拉伸大小 #### 示例3 如果定位元素的祖先元素沒有定位，最大可拉伸到與視口等大。  #### 示例4 如果定位元素的祖先元素有定位（包括fixed定位），最大只能拉伸到定位祖先元素的寬高。  ### absolute、`%`以及子元素 利用`absolute`設置元素大小的元素的**子元素**是可以利用`%`來設置大小的，它的參考標是它的定位父級元素（沒有，則為視口） >[warning] **注意：** 這一點在父元素高度不明確的情況下（使用min/max-height或不定義高度的情況下），仍然適用。（非定位的話，百分就會失效為auto，也就是看元素自己內容的高度） #### 示例5  ### absolute拉伸的自適應性和塊級元素自適應性的區別 從上面的例子中我們不難看出通過absolute拉伸的元素的寬高都是自適應的，或依據視口大小的改變而改變，或依據定遠父級的大小改變而改變。 有的同學會說，塊級元素不都是如此嗎？ 塊級元素所有也有伸縮特性，但只在水平方向，我們仔細觀看上面的例子，不難發現我們通過absolute是元素**在垂直方向也進行了伸縮拉伸**。 除此之外，我們**還能在這個自適應的范圍里進行一些定制**，達到什么三列布局左右邊定寬中間自適應什么的。（會在最后的應用中舉栗） #### 實例6 以下達到了一個類似于padding但確是自適應父容器content的效果  ## absolute（fixed）的跟隨特性 absolute后的元素的位置雖然是以定位祖先元素或則視口為基準的，但是當我們absolute又沒有使用left等移動這個元素時，這個元素仍然在它原本所處的文檔流中的位置上。 我們將以上的表現稱之為absolute的跟隨性（即使祖先元素有定位依然有效） >[danger] 需要注意的一點是固然absolute后的元素仍然會停留在它原本屬于文檔流時的位置，但它此時已經脫離文檔流，不再占位，故它后面的元素會補位。 ### 示例7  ## absolute，天元突破！ 設置了absolute的元素，在父元素無定位的前提下，能夠突破父元素的限制（中間沒有定位祖先元素，甚至能突破出html元素直到**視口**） 并且在父元素`overflow:hidden`的限制下，`absolute`**仍然有效！** （只要設置overflow:hidden的祖先元素和absolute元素之間沒有定位元素）（非absolute/fixed定位的元素都會被裁剪掉） 也就是說，absolute的元素在設置了overflow:hidden的元素的外部**依然可見。**（其它定位只有`fixed`能達到同樣的效果） 另外如果是`overflow:auto/scroll`，在滿足**設置overflow:\*的祖先元素和absolute元素之間沒有定位元素**這條規則下，即使圖片超過容器大小，也**不**會出現滾動條 如下圖示例，可以在某一個div上模仿類fixed背景效果（fixed只能在視口容器上營造這種效果）  ## absolute與text-align 照理說absolute會使元素塊狀化，而塊級元素是不受text-align影響的，**但是!!** 在absolute的**跟隨性**和幽靈空白節點（每個行框盒子在頭部都會產生一個）的共同作用之下，text-align就有效果了。 >[warning] **注意:** 如果要兼容IE低版本（不存在幽靈空白節點），則需要手動創造一個空白字符以供定位， > >比如`::before{content:'\2002'}`，其中\2002表示某一種空格 ## absolute與clip clip屬性必須配合absolute/fixed才會有效果，需要注意的是clip裁剪相較于overflow裁剪更加"強力"， 體現在這貨裁剪的是`border-box`，而overflow是padding-box ## absolute與margin聯合の應用場景 ### hot效果 我們常常將relative和absolute一起配合使用，但有些時候relative并不是必須的，它甚至會限制absolute的發揮——毀掉absolute的跟隨性  ### 終極奧義:創世紀·宇宙坍塌 需要配合margin:auto，需要明確在哪個容器中展示此奧義并讓它定位（容器和absolute的元素之間沒有其它定位元素）。