HTML CSS position 屬性及relative、absolute、fixed區別

position 是一個比較實用的功能,網頁編程中必備技能!

在頁面的編寫過程中我們通常會用到html的position屬性來合理安排我們標籤的位置,來達到視覺的美觀,所以我們需要加深對position這個屬性的瞭解。

一、Position的屬性值

position有四個值:static,relative,absolute,fixed;
在這裏插入圖片描述
定義看着雲裏霧裏,下面具體說明

二、static

static就是html默認的文檔流形式,一個塊狀元素獨佔一行如div、p,多個內聯元素佔一行如span、a;
實際實用確實不多,基本不使用。

三、relative

relative是相對於標籤原來的位置偏移,請看圖:
在這裏插入圖片描述
其實就是相對於自己的位置的改變,可以理解爲自身的移動,偏移位置

四、absolute

absolute是相對於不是默認文檔流形式的父類元素的位置偏移,如果父類元素是static的話,那就看父類元素的父類元素是不是非static的,一直找到body爲止。
實際實用過程非常多,也是最多的。可以理解爲相對於父親元素的定位,那麼在每個div裏面,相同系列的每個模塊特定位置展示出來,非常實用。
在這裏插入圖片描述
比如價格相對於父佈局總是在同一個位置,就可以用這個屬性來實現。

五、fixed

fixed是相對於瀏覽器窗口的位置偏移,很好理解,實際也非常實用,比如某一塊內容固定在瀏覽器的某一個位置,永遠在這個位置。最簡單例子就是,返回頂部、底部按鈕功能性業務。
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章