盒子定位

一枢纠、定位有哪幾種

float浮動定位
position:absolute;靜態(tài)定位
position:absolute;絕對定位
position:relative;相對定位
position:fixed;固定定位
position: static; 靜態(tài)定位

二黔牵、四種定位的特性
? flaot定位 相對于父元素容器, 后面緊鄰的則會受到浮動的影響, 這種定位使得元素脫離文檔流
? static(靜態(tài)定位) 照文檔的書寫布局自動分配在一個合適的地方,這種定位方式用margin來改變位置诵次,對left、top蝎宇、z-index等設(shè)置值無效贤旷,這種定位不脫離文檔流。
? position:relative; 可以通過設(shè)置left唉地、top等值据悔,使得指定元素相對其正常的位置進(jìn)行偏移,這種定位不脫離文檔流耘沼;
? position:absolute;這種定位通常設(shè)置父元素為relative定位來配合使用)极颓,在沒有父元素的條件下,它的參照為body群嗤,該方式脫離文檔流菠隆;
fixed(固定定位)相對于整個文檔的,只需設(shè)置它相對于各個方向的偏移值狂秘,就可以將該元素固定在頁面固定的位置浸赫,脫離文檔流;

三赃绊、詳細(xì)解釋相對定位

對某元素設(shè)置了相對定位,那么首先這個元素他會跟其它的元素一樣羡榴,出現(xiàn)在文檔流中它該出現(xiàn)的位置碧查,然后,我們可以設(shè)置它的水平或垂直偏移量校仑,讓這個元素相對于它在文檔流中的位置的起始點(diǎn)進(jìn)行移動忠售。有一點(diǎn)要注意, 在使用相對定位時迄沫,就算元素被偏移了稻扬,但是他仍然占據(jù)著它沒偏移前的空間。這里值得注意的一點(diǎn)是:偏移可不是邊距羊瘩,跟邊距是不一樣的泰佳。

四盼砍、詳細(xì)解釋絕對定位

被設(shè)置了絕對定位的元素,在文檔流中是不占據(jù)空間的逝她,如果某元素設(shè)置了絕對定位浇坐,那么它在文檔流中的位置會被刪除,那這個元素到哪去了呢黔宛?它浮了起來近刘,其實(shí)設(shè)置了相對定位relative時也會讓該 元素浮起來,但它們的不同點(diǎn)在于臀晃,我們可以通過z-index來設(shè)置它們的堆疊順序

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末觉渴,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子徽惋,更是在濱河造成了極大的恐慌案淋,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,884評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件寂曹,死亡現(xiàn)場離奇詭異哎迄,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)隆圆,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,347評論 3 385
  • 文/潘曉璐 我一進(jìn)店門漱挚,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人渺氧,你說我怎么就攤上這事旨涝。” “怎么了侣背?”我有些...
    開封第一講書人閱讀 157,435評論 0 348
  • 文/不壞的土叔 我叫張陵白华,是天一觀的道長。 經(jīng)常有香客問我贩耐,道長弧腥,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,509評論 1 284
  • 正文 為了忘掉前任潮太,我火速辦了婚禮管搪,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘铡买。我一直安慰自己更鲁,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,611評論 6 386
  • 文/花漫 我一把揭開白布奇钞。 她就那樣靜靜地躺著澡为,像睡著了一般。 火紅的嫁衣襯著肌膚如雪景埃。 梳的紋絲不亂的頭發(fā)上媒至,一...
    開封第一講書人閱讀 49,837評論 1 290
  • 那天顶别,我揣著相機(jī)與錄音,去河邊找鬼塘慕。 笑死筋夏,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的图呢。 我是一名探鬼主播条篷,決...
    沈念sama閱讀 38,987評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼浑劳,長吁一口氣:“原來是場噩夢啊……” “哼仰美!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起兵扬,我...
    開封第一講書人閱讀 37,730評論 0 267
  • 序言:老撾萬榮一對情侶失蹤指蚜,失蹤者是張志新(化名)和其女友劉穎乞巧,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體摊鸡,經(jīng)...
    沈念sama閱讀 44,194評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡绽媒,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,525評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了免猾。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片是辕。...
    茶點(diǎn)故事閱讀 38,664評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖猎提,靈堂內(nèi)的尸體忽然破棺而出获三,到底是詐尸還是另有隱情,我是刑警寧澤锨苏,帶...
    沈念sama閱讀 34,334評論 4 330
  • 正文 年R本政府宣布疙教,位于F島的核電站,受9級特大地震影響伞租,放射性物質(zhì)發(fā)生泄漏贞谓。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,944評論 3 313
  • 文/蒙蒙 一葵诈、第九天 我趴在偏房一處隱蔽的房頂上張望经宏。 院中可真熱鬧,春花似錦驯击、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,764評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至广辰,卻和暖如春暇矫,著一層夾襖步出監(jiān)牢的瞬間主之,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,997評論 1 266
  • 我被黑心中介騙來泰國打工李根, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留槽奕,地道東北人。 一個月前我還...
    沈念sama閱讀 46,389評論 2 360
  • 正文 我出身青樓房轿,卻偏偏與公主長得像粤攒,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子囱持,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,554評論 2 349

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案夯接? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,737評論 1 92
  • 一、定位 解決頁面上盒子與盒子之間的層疊問題 1纷妆、元素的定位屬性 邊偏移:通過邊偏移屬性top盔几、bottom、le...
    舊游舊游閱讀 969評論 3 0
  • 學(xué)習(xí)建議 定位、浮動是 CSS 核心知識點(diǎn)际邻,必須熟練掌握芯丧。 1.文檔流的概念指什么?有哪種方式可以讓元素脫離文檔流...
    饑人谷_任磊閱讀 1,080評論 0 3
  • CSS 定位 CSS有三種基本的定位機(jī)制:普通流,浮動度硝,絕對定位(absolute, fixed):普通流是默認(rèn)定...
    _空空閱讀 5,725評論 0 15
  • 初中時的我們年少單純肿轨,所關(guān)心的不過是學(xué)習(xí)、玩耍蕊程。那時我學(xué)習(xí)好椒袍,可以幫他寫作業(yè),他人緣好哥們一群藻茂,經(jīng)常帶著我一起玩驹暑。...
    陌上花開請緩緩歸矣閱讀 445評論 0 0