元素定位分為哪幾種形式,分別有什麼特點?使用者98465426856812021-10-01 13:15:16

1、固定定位

當元素的position屬性設定為fixed時,這個元素就被固定了,被固定的元素不會隨著捲軸的拖動而改變位置(在視野中),相對螢幕的可視區進行定位。

固定定位,使用top、bottom、left和right這4個屬性來設定元素相對瀏覽器視窗的位置,造成元素完全脫離文件流,改變元素型別,多用於“回頂部”特效和固定欄目的設定。

2、相對定位

當元素的position屬性設定為relative時,此時元素便具有相對定位的特性。相對定位的元素,其位置是相對於它的原始位置計算而來的,同樣具有top、bottom、left和right這4個屬性。相對定位不使元素脫離文件流,不改變元素的本身型別。

3、絕對定位

絕對定位absolute,是定位屬性中出場頻率最高的一個,一般配合relative使用,真正的實現了“指哪打哪”的效果。一個元素變成了絕對定位元素,這個元素就完全脫離正常文件流了,絕對定位元素的前面或者後面的元素會認為這個元素並不存在,即這個元素“浮”在其他元素上面。絕對定位會改變元素的本身型別(行內元素會變成塊元素),其位置如果有定位父級相對於定位父級發生偏移,如果沒有定位父級相對於整個文件發生偏移。

4、靜態定位

如果沒有指定元素的position屬性值,元素也就是靜態定位。static是position屬性的預設值,它表示塊保留在原本應該在的位置,不會重新定位。

這個屬性一般很少使用,不支援left、top等屬性值,使用場景一般在清除其他定位屬性上。