天天看點

定位(靜态、相對、固定、絕對,粘性定位)

定位有5種方式:

       1. static 靜态定位/無定位:沒用型

                用于消除定位,符合标準流;

       2. relative 相對定位:自戀型

               (1)相對位置占據文檔流,它相對自己原來位子挪動,即移動位置參照自己原來的位置;

               (2)原來空缺的位子仍保留,即空缺的位置不會被其他元素所占有;

               (3)給絕對定位當爹的. 

       3. absolute 絕對定位:拼爹型

               (1)始終由父标簽決定其位置,即以父标簽作為參照物;

               (2)若無祖先元素/祖先元素沒有定位,則以整個浏覽器作為參照物;

               (3)若祖先元素有定位(除了static定位之外),則以最近一級的定位祖先元素作為參照物(就近原則);

               (4)絕對定位脫離文檔流,即相對定位祖先标簽挪動後,原來的空缺位置不再占有;

   4. fixed 固定定位:

     (1)用于固定在浏覽器頁面上,不随浏覽器的滾動而改變位置;

     (2)以浏覽器為參照物,和父元素沒有任何關系;

     (3)不随滾動條的滾動而滾動;

     (4)固定定位不占有原來的位置,即脫離标準流.

   5. sticky 粘性定位:

繼續閱讀