CSS關於位置布局

2022-08-14 08:36:17 字數 2118 閱讀 7799

平常布局

關於fixed。

fixed所在的div層,會在整個可視介面定位,不會隨滾動條而移動,始終處在你所能看見的介面的相應位置

(相當於你在電腦螢幕上貼了一張紙貼,你的電腦在上下移動,但在電腦螢幕上的紙貼卻隨電腦而動,在螢幕上貼著的紙還是在那裡貼著。)

fixed所在的div層也不會隨視窗的變化而移動位置,比如這個div層在視窗右上角,視窗縮小後,這個div層還在視窗右上角,大小也不改變。

關於relative。

首先,relative的兩個層,呈現上下分布,在瀏覽視窗介面定位,隨滾動條下移,relative和普通層一樣,不會在顯示。

relative層中,(relative層所代表的就是和普通層一樣,被分配到相應的位置,即相應的格中,隨著顯示的元素位置的改變,那個被分配到的格是不會改變的

----比如下方第三層圖中,綠和藍之間的空白層,就是藍本來被分配到的位置,但藍元素上移後,格還在,就會顯示空白-----無元素):

想要上移,top必須為負;想要下移,top為正;(所遺留的空白均顯示此處無元素)

不動的話,top為0;(可不寫)

關於absolute。

一般情況下,absolute屬性的顯示要求div層中套div層。

0.第一層div層absolute,position後的屬性使div元素效果以整個頁面為座標進行定位。

第二層div層沒有absolute,元素效果也是以頁面為主,從頭顯示效果。(如下方第一層)

1.若內層的div層沒有absolute屬性,外層的div層absolute屬性,外層的div元素效果以整個頁面為座標進行定位。

position下的屬性規定的效果以瀏覽頁面為主。(如下方第二層)

2.若外層的div層沒有absolute屬性,內層的div層absolute屬性,內層的div元素效果以整個頁面為座標系進行定位。

position下的屬性規定的效果以瀏覽頁面為主。(如下方第三層)

3.外層中position是absolute(其實fixed、relative都行),後面沒有position的下屬性;內層中position是absolute,後面是position的下屬性,

內層div中的元素效果會以外層的div為座標進行定位。(如下方第四層)

關於CSS布局

css三大定位機制 標準文件流 浮動布局 絕對定位布局。一 標準文件流 1.特點 從上到下,從左到右輸出文字。標準文件流裡面又分兩種情況,即塊級元素和行級元素,也可以說標準文件流是由塊級標籤和行級標籤組成的。塊級元素特點 從左到右撐滿頁面,獨佔一行,觸碰到頁面邊緣時會自動換行,常見的塊級標籤有div...

CSS關於flex布局

注意 flexbox布局最適合應用程式的元件和小規模布局,而grid布局則適用於更大規模的布局 談flex布局前先了解下flex的基本屬性 flex的基本屬性有flex basis flex direction flex wrap flex flow flex grow flex shrink六個 ...

關於css背景位置設定

可以把 分開寫 background url image feed.gif no repeat background position 10px 5px 調整其中的數值就可以達到調整位置的目的。第乙個是左右,第二個引數是上下 例如 background position 20px 10px 指向右移...