絕對定位 相對定位 固定定位的區別

2021-08-16 06:09:56 字數 547 閱讀 2982

◆絕對定位 position:absolute;

特點:★元素使用絕對定位之後不佔據原來的位置(脫標)

★元素使用絕對定位,位置是從瀏覽器出發。

★巢狀的盒子,父盒子沒有使用定位,子盒子絕對定位,子盒子位置是從瀏覽器出

發。★巢狀的盒子,父盒子使用定位,子盒子絕對定位,子盒子位置是從父元素位置出

發。★給行內元素使用絕對定位之後,轉換為行內塊。(不推薦使用,推薦使用

display:inline-block;)

◆相對定位  position: relative;

特點:★使用相對定位,位置從自身出發

。★還佔據原來的位置。

★子絕父相(父元素相對定位,子元素絕對定位)

★行內元素使用相對定位不能轉行內塊

◆固定定位   position:fixed;

特點:★固定定位之後,不佔據原來的位置(脫標)

★元素使用固定定位之後,位置從瀏覽器出發。

★元素使用固定定位之後,會轉化為行內塊(不推薦,推薦使用display:inline-

block;)

絕對定位,相對定位,固定定位

通過position屬性來設定元素的定位 static 預設值,元素沒有開啟定位 relative 開啟元素的相對定位 absolute 開啟元素的絕對定位 fixed 開啟元素的固定定位 也是絕對定位的一種 說明 當開啟了元素的相對定位以後,而不設定偏移量時,元素不會發生任何變化 相對定位是相對於...

CSS之定位,相對定位,絕對定位,固定定位

1 position 屬性可以控制web瀏覽器如何以及在何處顯示特定的元素。2 可以使用position屬性把乙個元素放置到網頁中的任何位置。可選值 static 預設值,元素沒有開啟定位 relative 開啟相對定位 absolute 開啟絕對定位 fixed 開啟固定定位 3 相對定位 每個元...

相對定位 絕對定位 固定定位

設定position屬性值為static的元素是乙個靜態定位元素,此值為預設值,即此元素在正常文件流中。設定position屬性為relative的元素是乙個相對定位元素,其定位的參照物為元素本身 即元素原本的位置進行定位 例項 parent child style class parent cla...