摘要:下文稱位置屬性即為。注意,不會脫離文檔流,具體見下面的圖示。直譯為修正,簡單粗暴,直接相對瀏覽器窗口顯示區(qū)域定位。
Position定位
個人覺得position這個屬性真的算是CSS的見面殺了。尤其是absolute,當年可是被虐的不輕。當然了,現(xiàn)在愛上了這個屬性,誰用誰知道。position屬性
position是CSS的一個屬性,地位較高,也是我們重點要說的一個屬性。
對應(yīng)了四個與之相關(guān)的位置屬性,top、right、bottom、left,分別是指離上、右、下、左的距離,注意是設(shè)定后移動自身,不是擠走別的元素。
下文稱位置屬性即為top、right、bottom、left。
如果一個頁面,不通過position的調(diào)整,在如今看來,將是極度難以忍受的。其主要包含下列屬性值,不含繼承的話,共有5個,以下一一例舉:
static
直譯為靜態(tài),默認值,在其上使用position的位置屬性無效。
relative
直譯為相對,與static近似,但在其上使用position的位置屬性有效。
注意,relative不會脫離文檔流,具體見下面的圖示。
absolute
直譯為絕對,向上尋找 第一個非static定位的標簽,然后位置屬性相對其有效。如果沒有找到,則相對document。
向上尋找:標簽存在父子級關(guān)系,由子級向父級乃至祖宗級直到body為止。向下則相反。
absolute會脫離文檔流。
fixed
直譯為修正,簡單粗暴,直接相對瀏覽器窗口顯示區(qū)域定位。
fixed會脫離文檔流。
sticky
直譯為粘性,當相應(yīng)內(nèi)容顯示在視覺范圍內(nèi),則表現(xiàn)為relative定位,當內(nèi)容即將逃出顯示區(qū)域時,切換為fixed定位。
sticky不會脫離文檔流,即使換成了fixed。以下針對5種定位做出圖文描述
static
static設(shè)置位置屬性是無效的
static為了方便理解還是與relative對比可以看出效果
relative
relative設(shè)置位置屬性有效,并且沒有脫離原本文檔流,只是顯示位置變化了而已
absolute
此圖是證明相對于document
absolute的最大難點就是具體相對誰的定位:
absolute相對的是向上第一個不是static默認定位的元素,如果沒有找到,則相對于document
此圖是證明相對于非static的父級標簽,也可以自己試試,父級標簽都是默認會如何。
fixed
相對于瀏覽器窗口顯示內(nèi)容定位
如果對fixed元素的父級元素設(shè)置了transform,則回導(dǎo)致fixed失效,這里有個印象就好。
sticky
處在顯示區(qū)域中是使用relative,當要逃出顯示區(qū)域時切換為fixed
新出的,兼容性注意下就好,非常適合做一下標題模塊。
以上就是position相關(guān)的速講知識,有疑問或者其他可以留言詢問。
如果文章對你有一點幫助,我就非常的開心了。源碼相關(guān)
喜歡我的文章,請關(guān)注我,定期發(fā)布技術(shù)文章,滿滿的干貨。
CodePen
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/52650.html
摘要:下文稱位置屬性即為。注意,不會脫離文檔流,具體見下面的圖示。直譯為修正,簡單粗暴,直接相對瀏覽器窗口顯示區(qū)域定位。 Position定位 個人覺得position這個屬性真的算是CSS的見面殺了。尤其是absolute,當年可是被虐的不輕。當然了,現(xiàn)在愛上了這個屬性,誰用誰知道。 position屬性 position是CSS的一個屬性,地位較高,也是我們重點要說的一個屬性。 對應(yīng)了四...
摘要:入門教程六分之三篇沒辦法,我直播教小伙伴入門,屬性講完,準備說定位的時候,他們就喊停,不住了。。。選擇器表達式如下相關(guān)效果見表達式關(guān)鍵詞特性屬性屬性即樣式定制的具體樣式,比如定制寬高,分別為與等。 CSS 入門教程六分之三篇 沒辦法,我直播教小伙伴CSS入門,屬性講完,準備說定位的時候,他們就喊停,hold不住了。。。所以先寫到六分之三,23333333 要點 解釋 引用 如...
摘要:盒模型要點知識務(wù)必注意看,這可是前端面試必定會遇到的問題。盒模型的主要屬性,除繼承外有兩個值這里不再細說歷史原因,只說其作用。嚴格來說與標簽大小無關(guān),但是影響視覺上的位置。具象化需調(diào)試指出,如下其中的最外圈的黃色區(qū)域就是了。 盒模型要點知識 務(wù)必注意看,這可是前端面試 必定會遇到 的問題。 box-sizing 盒模型的主要CSS屬性,除繼承外有兩個值: content-box...
閱讀 1386·2019-08-30 12:54
閱讀 1870·2019-08-30 11:16
閱讀 1613·2019-08-30 10:50
閱讀 2448·2019-08-29 16:17
閱讀 1266·2019-08-26 12:17
閱讀 1378·2019-08-26 10:15
閱讀 2387·2019-08-23 18:38
閱讀 785·2019-08-23 17:50