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