CSS3 定位 Position研究

2021-09-06 19:37:35 字數 2277 閱讀 8402

當瀏覽者檢視乙份網頁檔案時,通常使用者**(user agents, ua, 瀏覽器)會提供給瀏覽者乙個視區(視窗或者是畫面裡的其它可視區域)。當我們調整視區大小時,ua 就有可能會改變檔案上布局。

當視區比檔案所呈現的canvas 區域還小時,ua 可能會提供乙個卷軸的機制來讓您一窺檔案的全貌。理論上每個canvas 最多只能有乙個視區,不過ua 可以產生乙個以上的canvas(例如在同一份檔案上提供不同的可視區域, 如框架格)。

如果一些box的位置與大小是以其它相關的「矩行方塊」的邊緣(edges)來計算的話,我們就將這樣的「矩行方塊」稱之為承載區塊(containing blocks)。再簡單的講,所謂承載區塊指的是,離「該元素」最近的區塊級親代元素;無論「該元素」的定位或者是浮動,皆是以它的承載區塊來做參考基準(除了fixed定位方式)。

底下是乙個簡單的承載區塊示意圖(demo-two 的承載區塊為demo-one)。

什麼是正常流向呢?由上而下、由左至右這樣的走向就是所謂的正常流向;我們拿超檔案標記語言來說好了,其原始碼撰寫的方向是從上而下由左至右,這就是正常流向。而瀏覽器也是依據這樣的走向來解譯(直譯)我們的原始碼。

換個角度來說,在大部分的情況下,正常流向指的是在網頁裡頭,顯示元素標籤的方式。另外,多數的html元素標籤都是屬於inline box或blockbox。block box裡可以包含inline box;反之,inline box裡不能包含有blockbox。

所屬的設定值

位置定位

靜態 | 相對 | 絕對 | 中心 | 頁 | 固定

預設2006/02/15:靜態

適用於:除了表列組與表列之外的全部元素

繼承性:無

用來將html元素所產生的box定位在我們想要讓它呈現的位置上。

依照撰寫原始碼時的順序來定位。白話的講就是依序我們撰寫html元素所產生的box讓它自然地排在原本流向應該在的位置上。static這個值不用特別去指定它,因為它是預設值,也就是說所有的box元素一開始通通在本來應有的位置上。並且不適用bottom、left、right與top這四個屬性。

相對於原本的位置(不是相對於其它的元素的位置)。將元素定位在相對 ​​於原本的位置;該元素會移動到我們所定位的地方,而原本位置的大小會在承載區塊中被保留。

相對於承載區塊的位置。該元素會從html的流向中移除,然後依據承載區塊來重新定位給該元素應有的空間,而原本位置的大小會在承載區塊中被清除。其親代元素的定位值不可為static

相對於瀏覽器視窗的視區座標,將位置固定住不再隨卷軸的移動而改變。

所屬的設定值

底部框設定下方間距左側設定框左邊間距權設定右邊間距箱頂盒設定上方間距

汽車 | |

預設值:auto 

適用於:定位元素

繼承性:無

這四個屬性是用來設定已定位目標元素與承載區塊的邊界距離。須注意的是,這四個值均可設為負數;當為負數時,該元素的位置會跑到承載區塊的邊界外。

所屬的設定值

z-index進行

ž軸定位

汽車 |

預設值:auto 

適用於:定位元素

繼承性:無

用來讓元素之間相互堆疊覆蓋。其值越大表示越上層 (也可使用負值)。

所屬的設定值

剪輯修剪可視的範圍

汽車 |

預設值:auto 

適用於:絕對定位的元素

繼承性:無

可見光範圍內的體積包圍剪內來修。

Position位置屬性 CSS3

學習筆記之position的使用 position常用屬性和區別 1 position relative 不脫離文件流 一般是設定給position absolute 的父層的 父層position relative 子層position absolute 的話,就是依照父層的邊界進行定位的,不然p...

CSS 定位position屬性

div h1 或 p 元素常常被稱為塊級元素。這意味著這些元素顯示為一塊內容,即 塊框 與之相反,span 和 strong 等元素稱為 行內元素 這是因為它們的內容顯示在行中,即 行內框 您可以使用 display 屬性改變生成的框的型別。將 display 屬性設定為 block,可以讓行內元素...

css實踐 position定位

position 用於設定目標物件的定位方式,一般有absolute relative static三個選項,設定後均可設定top bottom right left距離 absolute 允許物件漂浮於頁面之上,無須考慮周圍布局,如果父元素設定為static或者沒有設定,將以父元素的父元素為參考係...