你對position的了解有多少

2021-06-20 13:33:01 字數 2525 閱讀 5864

此文根據steven bradley的《how well do you understand css positioning?》所譯,整個譯文帶有我自己的理解與思想,如果譯得不好或不對之處還請同行朋友指點。

當人們剛接觸布局的時候都比較傾向於使用定位的方式。因為定位的概念看起來好像比較容易掌握。表面上你確切地指定了乙個塊元素所處的位置那麼它就會坐落於那裡。可是定位比你剛看到的時候要稍微複雜一點。對於定位來說,有一些東西會絆倒新手,所以在它成為你的慣用技巧前你需要掌握它們。

一旦你更深入地了解了它是怎麼運作的,你就能夠做出一些更棒的事情來。

在css中,每乙個元素都由乙個矩形盒子所包含。每乙個盒子都會具有乙個內容區,內容區被乙個內邊距所包裹,內邊距外是盒子的邊框,並且在邊框之外會有乙個外邊距用於與其他盒子分隔開來。這些你可以從下面這張看到。

定位模式規定了乙個盒子在總體的布局上應該處於什麼位置以及對周圍的盒子會有什麼影響。定位模式包括了常規文件流,浮動,和幾種型別的 position 定位的元素。

css position 屬性可以取5種值:

我會在下面對前三個值進行詳細的闡述並簡單地講解一下最後兩個值。

static 是 position 預設的屬性值。任何應用了 position:static 的元素都處於常規文件流中。它處於什麼位置以及它如何影響周邊的元素都是由盒模型所決定的。

乙個 static 定位的元素會忽略所有 top,right,bottom,left 以及 z-index 屬性所宣告的值。為了讓你的元素能使用任何的這些屬性,你需要先為它的 position 屬性應用這三個值的其中之一: absolute,relative,fixed

position 值為 inherit 的元素和其他所有屬性的繼承值一樣,元素只是簡單地應用了與父元素一樣的 position 值。

絕對定位(absolute positioning)

絕對定位的元素會完全地從常規文件流中脫離。對於包圍它的元素而言,它會將該絕對定位元素視為不存在。就好像display 屬性被設為 none 一樣。如果你想要保持它所占有的位置而不被其他元素所填充,那麼你需要使用其他的定位方式。

你可以通過 top, right, bottom, 和 left 四個屬性來設定絕對定位元素的位置。但你通常只會設定它們其中的兩個,top 或者 bottom,以及 left 或者 right。預設地它們的值都為 auto。

弄明白絕對定位的關鍵是知道它的起點在**。如果 top 被設定為20px那麼你要知道這20px是從**開始計算的。

乙個絕對定位的元素的起點位置是相對於它的第乙個 position 值不為 static 的父元素而言的。如果在它的父元素鏈上沒有滿足條件的父元素,那麼絕對定位元素則會相對於文件視窗來進行定位。哈!

關於「相對」這個概念你或許有點迷惑,尤其是還有乙個叫相對定位的東西,這是我們還沒有講到的。

當你在乙個元素的樣式上設定 position:absolute 意味著需要考慮父元素,並且如果父元素的 position 值不為 static ,那麼絕對定位元素的起點為父元素的左上角位置。

如果父元素沒有應用除了 static 以外的 position 定位,那麼它會檢查父元素的父元素是否有應用非 static 定位。如果該元素應用了定位,那麼它的左上角便會成為絕對元素的起點位置。如果沒有則會繼續向上遍歷dom直到找到乙個定位元素或者尋找失敗以到達最外層的瀏覽器視窗。

相對定位的元素也是根據 top, right, bottom, 和 left 四個屬性來決定自己的位置的。但只是相對於它們原來所處於的位置進行移動。在某種意義上來說,為元素設定相對定位和為元素新增 margin 有點相似,但也有乙個重要的區別。區別就是在圍繞在相對定位元素附近的元素會忽略相對定位元素的移動。

我們可以把它看做是一張的重像從真實的的位置開始進行了一點移動。它原始所佔據的位置仍然保留,但我們已經沒法再看到它,只能看到它的重像。這樣就讓元素之間可以進行位置的重疊,因為相對定位元素能夠移動到其他元素所佔據的空間中。

相對定位元素離開了正常文件流,但仍然影響著圍繞著它的元素。那些元素表現地就好像這個相對定位元素仍然在正常文件流當中。

我們無需再追問這個相對的位置是在**。因為這個相對位置很顯然是正常的文件流。相對定位有點兒像為元素新增了 margin ,對相鄰元素來說卻像是什麼都沒發生過。但實際上並沒有增加任何的 margin 。

固定定位的行為類似於絕對定位,但也有一些不同的地方。

首先,固定定位總是相對於瀏覽器視窗來進行定位的,並且通過哪些屬性的 top, right, bottom, 和 left 屬性來決定其位置。它拋棄了它的父元素,它就是定位中表現地有點兒反叛。

第二個不同點是其在名字上是繼承的。固定定位的元素是固定的。它們並不隨著頁面的滾動而移動。你可以告訴元素它所處的位置並永遠不再移動。噢~好像還挺乖巧的。

在某種意義上說固定定位元素有點兒類似固定的背景,只不過它的外層容器塊總是瀏覽器視窗罷了。如果你在 body 中設定乙個背景那麼它與乙個固定定位的元素的行為時非常像的,只不過在位置上的精度會略少一些。

背景也不能改變其在第三個維度的大小,也因而帶來了 z-index 屬性。

這個頁面是乙個二維平面。它具有寬度和高度。我們活在乙個用 z-index 作為其深度的三維的世界當中。這個額外的維度能夠穿越乙個平面。

你對position的了解到底有多少?

此文根據steven bradley的 how well do you understand css positioning?所譯,整個譯文帶有我自己的理解與思想,如果譯得不好或不對之處還請同行朋友指點。當人們剛接觸布局的時候都比較傾向於使用定位的方式。因為定位的概念看起來好像比較容易掌握。表面上你...

了解上司對你的期望

1 努力 專注的完成既定目標 負起責任,盡最大努力去完成自己目標的員工,是作為上司所非常希望看到的,但如果你無法完成或者不確定是否會完成目標的時候,上司會希望你能提前給他一些預告或則資訊。2 懂得用數字說話 對於上司來說沒有比客觀的數字更有說服力的東西,他們需要你去把重要的事情資料化,從而了解問題的...

說說你對promise的了解

依照 promise a 的定義,promise 有四種狀態 pending 初始狀態,非 fulfilled 或 rejected.fulfilled 成功的操作.rejected 失敗的操作.settled promise已被fulfilled或rejected,且不是pending 另外,fu...