先看以下**
當設定child的div改為絕對定位後
當父div沒設定絕對定位時，子絕對定位是相對於瀏覽器左上角座標，當時當父div設定了絕對或者相對定位後，效果如下
absolute（絕對定位）和 relative（相對定位）
【position:absolute】 意思是：絕對定位，他預設參照瀏覽器的左上角，配合top、right、bottom、left(下面簡稱trbl)進行定位。 絕對定位具有以下屬性：
1、如果沒有trbl，以父級的左上角，在沒有父級的時候，他是參照瀏覽器左上角,如果在沒有父級元素的情況下，存在文字，則以它前面的最後乙個文字的右上角為原點進行定位但是不斷開文字，覆蓋於上方。
2、如果設定trbl，並且父級沒有設定position屬性，那麼當前的absolute則以瀏覽器左上角為原始點進行定位，位置將由trbl決定。
3、如果設定trbl，並且父級設定position屬性(無論是absolute還是relative)，則以父級的左上角為原點進行定位，位置由trbl決定。即使父級有padding屬性，對其也不起作用，說簡單點就是：它只堅持一點，就以父級左上角為原點進行定位，父級的padding對其根本沒有影響。
以上三點可以總結出，若想把乙個定位屬性為absolute的元素定位於其父級元素內，必須滿足兩個條件：
設定trbl
父級設定position屬性
上面的這個總結非常重要，可以保證各位在用absolute布局頁面的時候，不會錯位，並且隨著瀏覽器的大小或者顯示器解析度的大小，而不發生改變。
padding屬性加上後，設定相對定位的子div會padding高寬度加上top或left度數，就像以下這樣
1、如果沒有trbl，以父級的左上角，在沒有父級的時候，他是參照瀏覽器左上角(到這裡和absolute第一條一樣)，如果在沒有父級元素的情況下，存在文字，則以文字的底部為原始點進行定位並將文字斷開(和absolute不同)。
2、如果設定trbl，並且父級沒有設定position屬性，仍舊以父級的左上角為原點進行定位(和absolute不同)
3、如果設定trbl，並且父級設定position屬性(無論是absolute還是relative)，則以父級的左上角為原點進行定位，位置由trbl決定(前半段和absolute一樣)。如果父級有padding屬性，那麼就以內容區域的左上角為原點，進行定位(後半段和absolute不同)。
以上三點可以總結出，無論父級存在不存在，無論有沒有trbl，均是以父級的左上角進行定位，但是父級的padding屬性會對其影響。
綜合上面對relative的敘述，我們就可以將position屬性為relative的div視成可以用trbl進行定位的普通div，或者說只要將我們平時布局頁面的div的css屬性中加上position:relative後，就不只是用float布局頁面了，還可以用trbl進行布局頁面了，再或者說加上position:relative的div也可以像普通的div進行布局頁面了，只不過還可以用trbl進行布局頁面。
總結：如果用定位來布局頁面，父級元素的position屬性必須為relative，而定位於父級內部某個位置的元素，最好用absolute，因為它不受父級元素的padding的屬性影響，當然你也可以用relative，計算的時候不要忘記計算padding的值。
相對定位與絕對定位
其實是非常簡單的概念，w3school 給出的兩幅圖可以一目了然地表達這兩個概念 相對定位 position relative 也就是說，相對定位是相對於元素原來的位置進行重新定位，定位後，任然佔據著在文件流中原始的位置。絕對定位 position absolute 也就是說，絕對定位是相對於已定位...
相對定位與絕對定位
relative是相對定位，相對於本身的位置，元素的位置通過 left top right bottom 屬性進行定位。left是離原座標x軸的距離，top是離原座標y軸的距離，它本身的位置還在。absolute是絕對定位，相對於視窗左上角的位置，元素的位置通過 left top right 以，b...
相對定位與絕對定位
什麼是文件流？將窗體自上而下分成一行行,並在每行中按從左至右的順序排放元素,即為文件流。只有三種情況會使得元素脫離文件流，分別是 浮動絕對定位和相對定位。對position的四個屬性值relative,absolute,static,fixed分的不是很清楚.trbl top right botto...