關(guān)于CSS:定位的原理

聲明:文章僅為個人學習記錄纽帖,內(nèi)容并非原創(chuàng)

position 屬性值的含義:
  • static(默認)

元素框正常生成敢艰。塊級元素生成一個矩形框,作為文檔流的一部分,行內(nèi)元素則會創(chuàng)建一個或多個行框,置于其父元素中瞬雹。

  • relative

元素框偏移某個距離。元素仍保持其未定位前的形狀,它原本所占的空間仍保留昌讲。

image.png

  • absolute

元素框從文檔流完全刪除,并相對于其包含塊定位减噪。包含塊可能是文檔中的另一個元素或者是初始包含塊短绸。元素原先在正常文檔流中所占的空間會關(guān)閉车吹,就好像元素原來不存在一樣。元素定位后生成一個塊級框醋闭,而不論原來它在正常流中生成何種類型的框窄驹。

image.png

  1. 絕對定位的元素的位置相對于最近的已定位祖先元素,如果元素沒有已定位的祖先元素证逻,那么它的位置相對于最初的包含塊乐埠。

2.因為絕對定位的框與文檔流無關(guān),所以它們可以覆蓋頁面上的其它元素囚企≌筛溃可以通過設(shè)置 z-index 屬性來控制這些框的堆放次序。

注:relative和static方式在最外層時是以<body>標簽為定位原點的龙宏,而absoulte方式在無父級是position非static定位時是以<html>作為原點定位扯罐。<html>和<body>元素相差9px左右。

注:使用absoulte或fixed定位的話烦衣,必須指定 left歹河、right、 top花吟、 bottom 屬性中的至少一個秸歧,否則left/right/top/bottom屬性會使用它們的默認值 auto ,這將導致對象遵從正常的HTML布局規(guī)則衅澈,在前一個對象之后立即被呈遞键菱,簡單講就是都變成relative,會占用文檔空間

注:
如果top和bottom一同存在的話今布,那么只有top生效经备。
如果left和right一同存在的話,那么只有l(wèi)eft生效部默。

  • fixed

元素框的表現(xiàn)類似于將 position 設(shè)置為 absolute侵蒙,脫離了文檔流,并且能夠根據(jù)top傅蹂、right纷闺、left、bottom屬性進行定位份蝴,但不同的是fixed是根據(jù)窗口為原點進行偏移定位的犁功,也就是說它不會根據(jù)滾動條的滾動而進行偏移。


fixed:固定定位 absolute:絕對定位 區(qū)別很簡單:

1婚夫、沒有滾動條的情況下沒有差異

2浸卦、在有滾動條的情況下,fixed定位不會隨滾動條移動而移動案糙,而absolute則會隨滾動條移動

可以這么理解限嫌,fixed:固定在當前window不動靴庆, absolute:會隨參照對象元素的高度和寬度變化而變化

一般fixed用在遮蓋層和固定在頁面某個位置,如固定在頂端的菜單欄萤皂,又如彈出提示框居中顯示


z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面匣椰。
  • 元素可擁有負的 z-index 屬性值裆熙。

  • 注釋:Z-index 僅能在定位元素上奏效(例如 position:absolute;)!

  • 該屬性設(shè)置一個定位元素沿 z 軸的位置禽笑,z 軸定義為垂直延伸到顯示區(qū)的軸入录。如果為正數(shù),則離用戶更近佳镜,為負數(shù)則表示離用戶更遠僚稿。


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市蟀伸,隨后出現(xiàn)的幾起案子蚀同,更是在濱河造成了極大的恐慌,老刑警劉巖啊掏,帶你破解...
    沈念sama閱讀 216,544評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件蠢络,死亡現(xiàn)場離奇詭異,居然都是意外死亡迟蜜,警方通過查閱死者的電腦和手機刹孔,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,430評論 3 392
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來娜睛,“玉大人髓霞,你說我怎么就攤上這事∑杞洌” “怎么了方库?”我有些...
    開封第一講書人閱讀 162,764評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長障斋。 經(jīng)常有香客問我薪捍,道長,這世上最難降的妖魔是什么配喳? 我笑而不...
    開封第一講書人閱讀 58,193評論 1 292
  • 正文 為了忘掉前任酪穿,我火速辦了婚禮,結(jié)果婚禮上晴裹,老公的妹妹穿的比我還像新娘被济。我一直安慰自己,他們只是感情好涧团,可當我...
    茶點故事閱讀 67,216評論 6 388
  • 文/花漫 我一把揭開白布只磷。 她就那樣靜靜地躺著经磅,像睡著了一般。 火紅的嫁衣襯著肌膚如雪钮追。 梳的紋絲不亂的頭發(fā)上预厌,一...
    開封第一講書人閱讀 51,182評論 1 299
  • 那天,我揣著相機與錄音元媚,去河邊找鬼轧叽。 笑死,一個胖子當著我的面吹牛刊棕,可吹牛的內(nèi)容都是我干的炭晒。 我是一名探鬼主播,決...
    沈念sama閱讀 40,063評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼甥角,長吁一口氣:“原來是場噩夢啊……” “哼网严!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起嗤无,我...
    開封第一講書人閱讀 38,917評論 0 274
  • 序言:老撾萬榮一對情侶失蹤震束,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后当犯,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體驴一,經(jīng)...
    沈念sama閱讀 45,329評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,543評論 2 332
  • 正文 我和宋清朗相戀三年灶壶,在試婚紗的時候發(fā)現(xiàn)自己被綠了肝断。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,722評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡驰凛,死狀恐怖胸懈,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情恰响,我是刑警寧澤趣钱,帶...
    沈念sama閱讀 35,425評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站胚宦,受9級特大地震影響首有,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜枢劝,卻給世界環(huán)境...
    茶點故事閱讀 41,019評論 3 326
  • 文/蒙蒙 一井联、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧您旁,春花似錦烙常、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,671評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽侦副。三九已至,卻和暖如春驼鞭,著一層夾襖步出監(jiān)牢的瞬間秦驯,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,825評論 1 269
  • 我被黑心中介騙來泰國打工挣棕, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留译隘,地道東北人。 一個月前我還...
    沈念sama閱讀 47,729評論 2 368
  • 正文 我出身青樓穴张,卻偏偏與公主長得像细燎,于是被迫代替她去往敵國和親两曼。 傳聞我的和親對象是個殘疾皇子皂甘,可洞房花燭夜當晚...
    茶點故事閱讀 44,614評論 2 353