關(guān)于css中的定位

今天分析下css中的各種定位

position用于定義定位常侦,他的值分別為static星爪,relative疆栏,fixed曾掂,absolute,sticky壁顶,最常用的也就是absolute和relative珠洗,一般都是子絕父相

1、static 默認(rèn)值

設(shè)置 position: static; 的元素不會以任何特殊方式定位若专;它是始終根據(jù)頁面的正常流進(jìn)行定位:同時靜態(tài)定位的元素不受 top许蓖、bottom、left 和 right 屬性的影響。

2膊爪、relative 相對定位

參考自己本身的位置自阱,不會脫離文檔流,文字不能被遮擋

?3米酬、fixed 固定定位

參考瀏覽器的窗口沛豌,不會跟隨滾動條的滾動而滾動,脫離文檔流赃额,寬度自適應(yīng)的時候加派,寬度不顯示,可以通過設(shè)置 width:100%

4跳芳、absolute 絕對定位

參考有定位屬性(除了 static)的祖先元素,定位元素通過一層一層向上找芍锦,找到有定位的祖先元

素,如果找到 body 依然沒有找到有定位的祖先元素飞盆,參考瀏覽器窗口(子絕父相)醉旦,脫離文檔

流,且文字能被遮擋桨啃,塊級元素設(shè)置margin:0 auto;會失效车胡,內(nèi)聯(lián)元素設(shè)置定位轉(zhuǎn)換成塊元素

5、sticky??粘性定位

參考瀏覽器的窗口照瘾,沒有達(dá)到 top 值之前正常顯示匈棘,達(dá)到 top 值之后類似于固定定位,不會跟

隨滾動條滾動而滾動

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末析命,一起剝皮案震驚了整個濱河市主卫,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌鹃愤,老刑警劉巖簇搅,帶你破解...
    沈念sama閱讀 210,914評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異软吐,居然都是意外死亡瘩将,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,935評論 2 383
  • 文/潘曉璐 我一進(jìn)店門凹耙,熙熙樓的掌柜王于貴愁眉苦臉地迎上來姿现,“玉大人,你說我怎么就攤上這事肖抱”傅洌” “怎么了?”我有些...
    開封第一講書人閱讀 156,531評論 0 345
  • 文/不壞的土叔 我叫張陵意述,是天一觀的道長提佣。 經(jīng)常有香客問我吮蛹,道長,這世上最難降的妖魔是什么拌屏? 我笑而不...
    開封第一講書人閱讀 56,309評論 1 282
  • 正文 為了忘掉前任潮针,我火速辦了婚禮,結(jié)果婚禮上槐壳,老公的妹妹穿的比我還像新娘然低。我一直安慰自己,他們只是感情好务唐,可當(dāng)我...
    茶點故事閱讀 65,381評論 5 384
  • 文/花漫 我一把揭開白布雳攘。 她就那樣靜靜地躺著,像睡著了一般枫笛。 火紅的嫁衣襯著肌膚如雪吨灭。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,730評論 1 289
  • 那天刑巧,我揣著相機(jī)與錄音喧兄,去河邊找鬼。 笑死啊楚,一個胖子當(dāng)著我的面吹牛吠冤,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 38,882評論 3 404
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼挡篓!你這毒婦竟也來了束倍?” 一聲冷哼從身側(cè)響起侣肄,我...
    開封第一講書人閱讀 37,643評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體夕春,經(jīng)...
    沈念sama閱讀 44,095評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,448評論 2 325
  • 正文 我和宋清朗相戀三年专挪,在試婚紗的時候發(fā)現(xiàn)自己被綠了及志。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,566評論 1 339
  • 序言:一個原本活蹦亂跳的男人離奇死亡狈蚤,死狀恐怖困肩,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情脆侮,我是刑警寧澤,帶...
    沈念sama閱讀 34,253評論 4 328
  • 正文 年R本政府宣布勇劣,位于F島的核電站靖避,受9級特大地震影響潭枣,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜幻捏,卻給世界環(huán)境...
    茶點故事閱讀 39,829評論 3 312
  • 文/蒙蒙 一盆犁、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧篡九,春花似錦谐岁、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,715評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至沛善,卻和暖如春航揉,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背金刁。 一陣腳步聲響...
    開封第一講書人閱讀 31,945評論 1 264
  • 我被黑心中介騙來泰國打工帅涂, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人尤蛮。 一個月前我還...
    沈念sama閱讀 46,248評論 2 360
  • 正文 我出身青樓媳友,卻偏偏與公主長得像,于是被迫代替她去往敵國和親产捞。 傳聞我的和親對象是個殘疾皇子醇锚,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,440評論 2 348

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

  • 什么是文檔流? 將窗體自上而下分成一行行, 并在每行中按從左至右的順序排放元素,即為文檔流轧葛。 只有三種情況會使得元...
    YH的練手記閱讀 372評論 0 0
  • 正常布局流 瀏覽器在默認(rèn)情況下尿扯,組織元素的布局方式: 任何元素都被包裝成一個盒子求晶,包含內(nèi)容、內(nèi)外邊距以及邊框 塊級...
    OmewSPG閱讀 1,015評論 0 0
  • 技術(shù)交流QQ群:1027579432衷笋,歡迎你的加入芳杏! 歡迎關(guān)注我的微信公眾號:CurryCoder的程序人生 1....
    CurryCoder閱讀 377評論 0 2
  • 剛剛學(xué)習(xí)了定位,一開始還是比較暈的辟宗,特別是關(guān)于里面的各種相對位置爵赵,不知道它們的坐標(biāo)具體是怎么算的。所以這里特別的記...
    婷樓沐熙閱讀 1,762評論 0 3
  • 一秕铛、定位布局 是什么约郁? 使用 position、left但两、right鬓梅、top、bottom谨湘,可以改變元素現(xiàn)有位置绽快,...
    LearnAnything閱讀 553評論 0 0