相對定位或絕對位置的適用條件

來源:互聯網
上載者:User
要理解定位你要先理解文檔流,在文檔流中相對定位的元素佔有位置,而且會影響後面的元素(塊元素、行內塊元素),比如兩個p並排,另外一個會換行。
<p>111</p>
<p>222</p>
而絕對位置就是把該元素從文檔流中踢出,不會佔用文檔流的位置,也不會影響後面的元素。
<p style="position: absolute;">111</p>
<p>222</p>
如上面的執行個體,111和222會重疊,審查元素你會發現222有實際位置,111沒有位置。他是使用left,right,top,bottom等屬性相對於其最接近的一個最有定位設定的父物件進行絕對位置,如果不存在這樣的父物件,則依據body對象。而其層疊通過z-index屬性定義 。

網頁布局涉及到各種裝置各種解析度下的相容,所以就註定絕對位置不能適用於大部分情境。。所以布局只能依賴於上階項目的位置,而不能依賴於裝置的高度和寬度。

適合絕對位置的情境主要是一些頁面協助工具功能。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.