CSS中定位方式position 有哪些?
定位方式position
定位的思想很簡單,允許定義元素相對于其正常位置應(yīng)該出現(xiàn)的位置,或者相對于父元素、另一個(gè)元素甚至瀏覽器窗口的位置。CSS使用position屬性控制定位類型,并配合4個(gè)定位偏移屬性:left\right\top\bottom控制偏移量
基本語法
position:static|relative|absolute|fixed|center|page|sticky;
語法說明
static:靜態(tài)定位,遵循正常文檔流,是所有元素默認(rèn)的定位方式,此時(shí)4個(gè)定位偏移屬性不會被應(yīng)用。一般不特別設(shè)定,除非要取消繼承其他元素的特別定位。
relative:相對定位,遵循正常文檔流,基準(zhǔn)位置為其正常文檔流中的位置,并通常需要top、bottom、left、right,屬性配合完成,設(shè)定元素相對于原來位置的偏移量。設(shè)置為相對定位的元素,會偏移某個(gè)距離,元素仍然保持其為偏移前的形狀它原來所占的空間仍保留,元素移動后可能會覆蓋其他元素
absolute:絕對定位設(shè)置為絕對定位的元素,從文檔流中刪除元素,原先在文檔流中所占的位置會取消,不再占用原有的空間,絕對定位“相對于”該元素,最近的已經(jīng)定位的祖先元素,若不存在,一定會的,祖先元素咋一直回溯到body元素。絕對定位的盒子偏移位置,不影響常規(guī)文檔流中的任何元素
fixed:固定定位與absolute一致,偏移量定位一般以窗口為參考,當(dāng)出現(xiàn)滾動條時(shí),對象不會隨著滾動元素原有位置空間不保留,對象脫離常規(guī)流
center:CSS 3,新增關(guān)鍵字與absolute 一致,偏移量定位以祖先元素的中心點(diǎn)為參考,盒子在其包含容器中垂直水平居中,盒子的偏移位置不影響常規(guī)流中的任何元素。對象脫離常規(guī)流,目前主瀏覽器均不支持該屬性值。
page:CSS 3新增關(guān)鍵字與absolut元素,在分頁媒體獲區(qū)域塊內(nèi),元素包含始終是初始包含塊,否則取決于每個(gè)absolute模式
sticky:CSS 3新增關(guān)鍵字對象在常態(tài)時(shí)遵循常規(guī)流也就是當(dāng)對象在屏幕中正常顯示時(shí),按照常規(guī)流排版,當(dāng)卷動到屏幕外,則表現(xiàn)如fixed,該屬性的表現(xiàn)就是現(xiàn)實(shí)中我們常見到的吸附效果
點(diǎn)擊加載更多評論>>