position布局 · 前端

布局頁面，Float為主，Position為輔！? float解決不了的問題才用postion **absolute(絕對定位)**：生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。脫離文檔流，而其層疊通過[z-index](http://www.divcss5.com/rumen/r402.shtml)屬性定義。此時對象不具有邊距，但仍有補白和邊框 >[danger]遵循原則：父級元素有static以外的定位(即父元素設置了absolute、fixed、relative)那么相對于父級進行定位，否則（父級元素為默認的static）會默認相對與瀏覽器窗口（body元素）（css中出現left top等才生效當元素有absolute且有left等其中一個值時就脫離當前文檔流） **fixed(絕對定位)**：也叫固定定位生成絕對定位的元素，相對于瀏覽器窗口（body）進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。 **relative(相對定位)**: 生成相對定位的元素，相對于其正常位置進行定位。因此，"left:20" 會向元素的 LEFT 位置添加 20 像素。對象不可層疊，但將依據left，right，top，bottom等屬性在正常文檔流中偏移位置 **static**：默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。 **inherit**：規定應該從父元素繼承 position 屬性的值。 >[danger]如果用 position來布局頁面，父級元素的position 屬性必須為relative，而定位于父級內部某個位置的元素，最好用absolute，因為它不受父級元素的padding 的屬性影響，當然你也可以用 position，不過到時候計算的時候不要忘記 padding 的值” 由于絕對定位脫離了文檔流，出現層次概念。那么每個元素到底在那一層，會不會沖突覆蓋。這時通過**z-index**?屬性來判定它們的層次關系。 | **屬性** | **說明** | | --- | --- | | auto | 默認層次 | | 數字 | 設置層次，數字越大，層次越高 | 任何元素的默認position 的屬性值均是static,靜態(初始效果) ``` <body style="border:1px solid blue"> <div style="width:100%;height:18px;border:1px solid red"></div> <div style="width:18px;height:200px;border:1px solid red"></div> <div style="width:100%;height:18px;border:1px solid red"></div> <div class='parent'> <div class='test'><div style="border:1px solid red;">test子內容</div></div> </div> </body> ``` ![](https://img.kancloud.cn/61/63/616334096847fe6aaca8aa1ef76c7e2f_1190x274.png) 【position:absolute】絕對定位，他默認參照瀏覽器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面簡稱TRBL)進行定位，有以下屬性： <span style="color:red">**1)**</span> 如果沒有TRBL，以父級的左上角，在沒有父級的時候，他是參照瀏覽器左上角,如果在沒有父級元素的情況下，存在文本，則以它前面的最后一個文字的右上角為原點進行定位但是不斷開文字，覆蓋于上方。無父級（他的父級是默認的static ）且他的position為absolute并且沒有trbl （父級（padding）的左上角）跟沒定位一個效果 ``` .parent{ border:10px solid black; width:800px; height:500px; margin:30px; padding:15px; background-color:yellow; } .test{ border:5px solid blue; width: 500px; height: 400px; margin: 20px; padding:10px; background-color:pink; position:absolute;//只有它時與沒它一樣的效果 } ``` ![](https://img.kancloud.cn/f1/79/f179e9962c060a70d3057f6a9c9471d1_919x894.png) <span style="color:red">**2)**</span>如果設定TRBL，并且父級沒有設定position 屬性，那么當前的absolute 則以瀏覽器左上角為原始點進行定位，位置將由TRBL 決定。? 1、無父級（他的父級是默認的static?）position為absolute，有left top等至少兩個位置屬性 ``` .parent{ border:10px solid black; width:800px; height:500px; margin:30px; padding:15px; background-color:yellow; } .test{ border:5px solid blue; width: 500px; height: 400px; margin: 20px; padding:10px; background-color:pink; position:absolute; top:0; left:0; } ``` 因為test有margin的原因，test未與body重疊 ![](https://img.kancloud.cn/7a/5f/7a5f1962bb134d42f2cec7d2c82cd3b1_917x917.png) 2、無父級（他的父級是默認的static?）position為absolute，有left等其中一個位置屬性：? ? 只有設置的left相對于窗口定位，其他位置沒有定義則還是以父元素定位 ``` .parent{ border:10px solid black; width:800px; height:500px; margin:30px; padding:15px; background-color:yellow; } .test{ border:5px solid blue; width: 500px; height: 400px; margin: 20px; padding:10px; background-color:pink; position:absolute; left:0; } ``` 設置了left，則水平方向是以瀏覽器窗口定位的，為設置top、bottom則是以父容器定位的 ![](https://img.kancloud.cn/1b/11/1b11321d028a717fe61715ce612b37ab_909x897.png) <span style="color:red">**3)**</span> 父級設定position 屬性(無論是absolute 還是relative)，并且無TRBL，則以父級的左上角為原點進行定位，位置由TRBL 決定。即使父級有Padding 屬性，對其也不起作用，說簡單點就是：它只堅持一點，就**以父級左上角為原點進行定位**，父級有padding的話以padding的原點。? 1、有父級無left等位置屬性：注意藍色的線是body可以看到parent跳出的文檔流(由于父級沒有top，left等值所以只是脫離文檔流而已（位置的表現和在文檔流一樣,無left和left:0它的效果完全不一樣） ``` .parent{ border:10px solid black; width:800px; height:500px; margin:30px; padding:15px; background-color:yellow; position:absolute; } .test{ border:5px solid blue; width: 500px; height: 400px; margin: 20px; padding:10px; background-color:pink; position:absolute; } ``` 注意此時父容器脫離文檔流，body的藍線在紅線位置了 ![](https://img.kancloud.cn/08/6e/086eaf5c7d2868ce571ec69370c529bc_932x696.png) 2、父級有left等位置屬性：注意藍色的線是body >[danger]注意：父級有left等屬性時，父容器的定位是以瀏覽器左上原點為定位點的（不是body也不是html） ``` .parent{ border:10px solid black; width:800px; height:500px; margin:30px; padding:15px; background-color:yellow; position:absolute; left: 10px; top: 100px; } .test{ border:5px solid blue; width: 500px; height: 400px; margin: 20px; padding:10px; background-color:pink; position:absolute; } ``` ![](https://img.kancloud.cn/60/eb/60eb0199a3555c2a7cbda73b53d2b12b_930x698.png) <span style="color:red">**4)**</span> 如果設定TRBL，并且父級設定position 屬性(無論是absolute 還是relative)，則以父級的左上角為原點進行定位，位置由TRBL 決定。即使父級有Padding 屬性，對其也不起作用，說簡單點就是：它只堅持一點，就以父級左上角為原點進行定位，父級的padding對其根本沒有影響。 1、父級position為absolute ``` .parent{ border:10px solid black; width:800px; height:500px; margin:30px; padding:15px; background-color:yellow; position:absolute; left: 10px; top: 100px; } .test{ border:5px solid blue; width: 500px; height: 400px; margin: 20px; padding:10px; background-color:pink; position:absolute; left: 0; } ``` ![](https://img.kancloud.cn/d2/95/d295bddf6dc1cbb46748d176cc0409c8_895x699.png) 2、父級為relative ``` .parent{ border:10px solid black; width:800px; height:500px; margin:30px; padding:15px; background-color:yellow; position:absolute; top: 100px; } .test{ border:5px solid blue; width: 500px; height: 400px; margin: 20px; padding:10px; background-color:pink; position:absolute; left: 0; } ``` ![](https://img.kancloud.cn/b7/c3/b7c33b3ea0b9e29a88cdc358ee93e9b6_1085x923.png) 總結:若想把一個定位屬性為absolute 的元素定位于其父級元素內，只有滿足兩個條件，? 第一：設定TRBL? 第二：父級設定Position 屬性? 上面的這個總結非常重要，可以保證你在用absolue 布局頁面的時候，不會錯位，并且隨著瀏覽器的大小或者顯示器分辨率的大小，而不發生改變。? 只要有一點不滿足，元素就會以瀏覽器左上角為原點，這就是初學者容易犯錯的一點，已經定位好的板塊，當瀏覽器的大小改變，父級元素會隨之改變，但是設定Position 屬性為? absolute 的板塊和父級元素的位置發生改變，錯位了，這就是因為此時元素以瀏覽器的右上角為原點的原因。? 初學者很容易犯錯的是，不清楚Position 屬性為absolute 的板塊，若想定位到父級板塊中，并且當瀏覽器的大小改變或顯示器的分辨率改變，布局不發生改變，是需要滿足兩個條件的，只要有一點不滿足，元素就會以瀏覽器左上角為原點，從而導致頁面布局錯位。 ***** 【position:relative】? 意思是相對定位，他是默認參照父級的原始點為原始點，無父級則以文本流的順序在上一個元素的底部為原始點，配合TRBL 進行定位，當父級內有padding 等CSS 屬性時，當前級的原始點則參照父級內容區的原始點進行定位，有以下屬性：? 1)如果沒有TRBL，以父級的左上角，在沒有父級的時候，他是參照瀏覽器左上角(到這里和absolute 第一條一樣)，如果在沒有父級元素的情況下，存在文本，則以文本的底部為原始點進行定位并將文字斷開(和absolut 不同)。? 2)如果設定TRBL，并且父級沒有設定position 屬性，仍舊以父級的左上角為原點進行定位(和absolut 不同)? 3)如果設定TRBL，并且父級設定position 屬性(無論是absolute 還是relative)，則以父級的左上角為原點進行定位，位置由TRBL 決定(前半段和absolut 一樣)。如果父級有Padding 屬性，那么就以內容區域的左上角為原點，進行定位(后半段和absolut 不同)。? 以上三點可以總結出，無論父級存在不存在，無論有沒有TRBL，均是以父級的左上角進行定位，但是父級的Padding 屬性會對其影響。? 綜合上面對relative 的敘述，我們就可以將position 屬性為relative 的DIV 視成可以用TRBL 進行定位的的普通DIV，或者說只要將我們平時布局頁面的div 的CSS 屬性中加上position:relative 后，就不只是用float 布局頁面了，還可以用TRBL 進行布局頁面了，或者說加上position:relative 的DIV 也可以像普通的DIV 進行布局頁面了，只不過還可以用TRBL進行布局頁面。但是position 屬性為absolute 不可以用來布局頁面，因為如果用來布局的話，所有的DIV 都相對于瀏覽器的左上角定位了，所以只能用于將某個元素定位于屬性為absolute 的元素的內部某個位置，這樣我們就可以總結比較重要的結論既然屬性為absolute 的元素用來定位某元素在父級中位置，就少不了TRBL，這時候根據一開始講的absolute 的第三條，如果父級元素沒有? position 屬性那么absolute 元素就會脫離父級元素，但是如果是布局頁面，父級元素position 的屬性又不能為absolute，不然就會以瀏覽器左上角為原點了，所以父級元素的position 屬性只能為relative！? 屬性為relative 的元素可以用來布局頁面，屬性為absolute 的元素用來定位某元素在父級中的位置? 總結：如果用position來布局頁面，父級元素的position屬性必須為relative，而定位于父級內部某個位置的元素，最好用absolute，因為它不受父級元素的padding的屬性影響，當然你也可以用position，不過到時候計算的時候不要忘記padding的值。? 但是定位(position)有一個缺點，不會自適應內部元素的高度，所以平時我們在布局頁面的時候，如果某個或者某些模塊高度永遠不變，就可以用定位，但是帆建議大家布局頁面的時候，還是要以Float 為主，Position 為輔！這樣你才能做出高質量的頁面。 >[danger]同理流式布局將寬度改成百分比（n%）