position:relative和position:absolute

1.定位的定義

  • static(靜態(tài)) 沒有特別的設(shè)定秆乳,遵循基本的定位規(guī)定懦鼠,不能通過z-index進行層次分級。
  • relative(相對定位) 對象不脫離文檔流屹堰,參考自身靜態(tài)位置通過 top bottom left right 定位肛冶,并且可以通過z-index進行層次分級。
  • absolute(絕對定位) 脫離文檔流扯键,通過 top bottom left right (簡稱TRBL)定位睦袖。選取其最近一個最有定位設(shè)置的父級對象進行絕對定位,如果對象的父級沒有設(shè)置定位屬性荣刑,absolute元素將以body坐標(biāo)原點進行定位馅笙,可以通過z-index進行層次分級。
  • fixed(固定定位) 這里所固定的參照對像是可視窗口而并非是body或是父級元素厉亏,可通過z-index進行層次分級董习。

2.相對定位(使元素位移)

當(dāng)我們給對象1設(shè)置了相對定位及TRBL以后,該對象出現(xiàn)以下變化:

  • 提高層疊級別(z-index增加)爱只,高于文本流阱飘;
  • 相對原位置A點向右位移left大小的距離;
  • 相對原位置A點向下位移top大小的距離;
  • 保留原來的位置沥匈。

結(jié)果:原來的默認(rèn)定位對象2位置不變蔗喂,對象1覆蓋了對象2的內(nèi)容、可以看出高帖,相對定位會保留原始位置缰儿,即對象1內(nèi)容脫離文檔流,但是位置不會脫離文檔流散址」哉螅可以理解為對象1雖然搬家了,但是老家的房子沒有賣掉预麸,依然在瞪浸。

相對定位

3.絕對定位(定位到任意位置)

如果說相對定位是搬家不賣房,那么絕對定位是搬了家以后把原來的房子賣掉了吏祸。完全脫離文檔流成為自由體对蒲。
當(dāng)我們給對象1設(shè)置了絕對定位及TRBL以后,該對象出現(xiàn)以下變化:

  • 提高層疊級別(z-index增加)贡翘,高于文本流蹈矮;
  • 相對原位置A點向右位移left大小的距離;
  • 相對原位置A點向下位移top大小的距離鸣驱。
  • 刪除原來位置泛鸟。

結(jié)果:對象1絕對定位移動后讓出了原來的位置,原來的默認(rèn)定位對象2位置上移踊东。

絕對定位

參考資料:詳解定位與定位應(yīng)用

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末北滥,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子闸翅,更是在濱河造成了極大的恐慌碑韵,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件缎脾,死亡現(xiàn)場離奇詭異,居然都是意外死亡占卧,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來恰画,“玉大人看彼,你說我怎么就攤上這事“认玻” “怎么了贺拣?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我譬涡,道長闪幽,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任涡匀,我火速辦了婚禮盯腌,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘陨瘩。我一直安慰自己腕够,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布舌劳。 她就那樣靜靜地躺著帚湘,像睡著了一般。 火紅的嫁衣襯著肌膚如雪甚淡。 梳的紋絲不亂的頭發(fā)上大诸,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天,我揣著相機與錄音材诽,去河邊找鬼底挫。 笑死,一個胖子當(dāng)著我的面吹牛脸侥,可吹牛的內(nèi)容都是我干的建邓。 我是一名探鬼主播,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼睁枕,長吁一口氣:“原來是場噩夢啊……” “哼官边!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起外遇,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤注簿,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后跳仿,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體诡渴,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年菲语,在試婚紗的時候發(fā)現(xiàn)自己被綠了妄辩。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡山上,死狀恐怖眼耀,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情佩憾,我是刑警寧澤哮伟,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布干花,位于F島的核電站,受9級特大地震影響楞黄,放射性物質(zhì)發(fā)生泄漏池凄。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一谅辣、第九天 我趴在偏房一處隱蔽的房頂上張望修赞。 院中可真熱鬧,春花似錦桑阶、人聲如沸柏副。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽割择。三九已至,卻和暖如春萎河,著一層夾襖步出監(jiān)牢的瞬間荔泳,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工虐杯, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留玛歌,地道東北人。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓擎椰,卻偏偏與公主長得像支子,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子达舒,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案值朋? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補...
    _Yfling閱讀 13,761評論 1 92
  • w3school過了HTML的知識之后,覺得要自己單純地去啃知識點有點枯燥巩搏,然后自己也很容易忘記昨登,所以便找具體的網(wǎng)...
    辛小仲閱讀 2,381評論 0 18
  • 當(dāng)在這一個頁面上實現(xiàn)布局和定位有幾種不同的技術(shù)。使用哪種技術(shù)贯底,很大程序上取決于內(nèi)容和目標(biāo)頁面丰辣,因為有很多技術(shù)比別人...
    lulu_c閱讀 1,070評論 0 5
  • 在CSS中關(guān)于定位的內(nèi)容是:position:relative | absolute | static | fix...
    feelinghappy618閱讀 638評論 0 0
  • position:relative | absolute | static | fixed static(靜態(tài)) ...
    Mandy_jin閱讀 382評論 0 0