CSS定位

來源于視頻教程:

https://www.bilibili.com/video/BV14J4114768?p=237

浮動和定位

  • 浮動可以讓多個(gè)塊級盒子一行沒有縫隙的排列顯示柑晒,經(jīng)常用于橫向排列盒子
  • 定位可以讓盒子自由自在的在某個(gè)盒子內(nèi)移動位置或者固定屏幕中某個(gè)位置,并且可以壓住其他盒子

定位組成

定位 = 定位模式 + 邊偏移
定位模式用于指定一個(gè)元素在文檔中的定位方式比原,邊偏移則決定了該元素的最終位置。
定位模式通過CSS的position屬性來設(shè)置康愤,其值可以分為四個(gè):

語義
static 靜態(tài)定位
relative 相對定位
absolute 絕對定位
fixed 固定定位

邊偏移,盒子移動到的最終位置。有top泄鹏,bottom实胸,left和right4格屬性

邊偏移屬性 示例 描述
top top:80px 頂端相對于父元素上邊線偏移量
bottom bottom:80px 底部相對于其父元素下邊線的偏移量
left left:80px; 左側(cè)相對于父元素左邊線的偏移量
right right:80px 右邊相對于父元素右邊線的偏移量

靜態(tài)定位static(了解)

靜態(tài)定位是元素的默認(rèn)定位方式他嫡,無定位的意思
選擇器{ position: static; }

  • 靜態(tài)定位按照標(biāo)準(zhǔn)流特性擺放位置,它沒有邊移量
  • 靜態(tài)定位在布局時(shí)很少用到

相對定位relative(重要)

相對定位是元素在移動位置的時(shí)候庐完,是相對于它原來的位置移動的钢属。
選擇器 { position: relative; }
相對定位的特點(diǎn):

  • 它是相對于自己原來的位置來移動的(移動位置的時(shí)候參照點(diǎn)是自己原來的位置)
  • 原來在標(biāo)準(zhǔn)流的位置繼續(xù)占有,后面的盒子仍然以標(biāo)準(zhǔn)流的方式對待它(不脫標(biāo)门躯,繼續(xù)保留原來的位置)
  • 典型的應(yīng)用相對定位淆党,用來給絕對定位當(dāng)?shù)?/li>

絕對定位absolute(重要)

絕對定位是相對于它祖先元素偏移的
選擇器 { position:absolute; }
絕對定位的特點(diǎn):

  • 如果沒有祖先元素或者祖先元素沒有定位(relative、absolute讶凉、fixed)宁否,則以瀏覽器為準(zhǔn)定位
  • 如果祖先元素有定位(相對、絕對缀遍、固定定位)慕匠,則以最近一級的有定位的祖先元素為參考點(diǎn)移動位置
  • 絕對定位不再占有原來的位置,脫標(biāo)
  • 子絕父相
  • 絕對定位(固定定位)會完全壓住盒子
    浮動元素不同域醇,只會壓住它下面標(biāo)準(zhǔn)的盒子台谊,但是不會壓住下面標(biāo)準(zhǔn)盒子里面的文字(圖片)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            float:left;
            width:150px;
            height:150px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div></div>
    <p>啦啦啦啦啦啦啦啦</p>
    <img src="imageName.jpg"/>
</body>
</html>
image.png

這是因?yàn)楦赢a(chǎn)生最初的目的是文字環(huán)繞效果的,讓文字環(huán)繞圖片的譬挚。讓div浮動不是壓住文字和圖片锅铅,是為了讓它們圍繞著div。
但是絕對定位(固定定位)會壓住下面標(biāo)準(zhǔn)所有的內(nèi)容减宣。
把上面樣式改為:

div{
            position:fixed;
            width:150px;
            height:150px;
            background-color: red;
        }

結(jié)果p標(biāo)簽和img全部被壓住在div下面


image.png
  • 如果絕對定位元素既有一個(gè)left屬性也有right屬性盐须,則默認(rèn)會執(zhí)行l(wèi)eft屬性,同理漆腌,有top和bottom屬性贼邓,則執(zhí)行top屬性**
  • 加了絕對定位的盒子可以直接設(shè)置高度和寬度**

固定定位fixed(重要)

固定定位是元素固定于瀏覽器可視區(qū)的位置。主要使用場景:可以在瀏覽器頁面滾動時(shí)元素的位置不會改變
選擇器 { position: fixed; }
固定定位的特點(diǎn):

  • 以瀏覽器的可視窗口為參照點(diǎn)移動元素
    跟父元素沒有任何關(guān)系
    不隨滾動條滾動
  • 固定定位不再占有原先的位置闷尿,脫標(biāo)
    固定定位也是脫標(biāo)的塑径,可以看作是一種特殊的絕對定位

固定定位小技巧:固定在版心右側(cè)位置

小算法:

  1. 讓固定定位的盒子left:50%,走到瀏覽器可視區(qū)(也可以看作版心)的一半位置
  2. 讓固定定位的盒子margin-left:版心寬度的一般距離填具。多走版心寬度的一半位置
    就可以讓固定定位的盒子貼著版心右側(cè)對齊了

粘性定位sticky(了解)

粘性定位可以被認(rèn)為是相對定位和固定定位的混合统舀。Sticky粘性的
選擇器 { position: sticky; top: 10px; }
粘性定位的特點(diǎn):

  • 以瀏覽器的可視窗口為參照點(diǎn)移動元素(固定定位特點(diǎn))
  • 粘性定位占有原先的位置(相對定位特點(diǎn))
  • 必須添加top、left、right誉简、bottom其中一個(gè)才有效
    跟頁面滾動搭配使用碉就。兼容性較差,IE不支持

四種模式總結(jié)

定位模式 是否脫標(biāo) 移動位置 是否常用
static 不能使用邊偏移 很少
relative 否(占有位置) 相對于自身位置移動 常用
absolute 是(不占有位置) 帶有定位的父級 常用
fixed 是(不占有位置) 瀏覽器可視區(qū) 常用
sticky 否(占有位置) 瀏覽器可視區(qū) 當(dāng)前階段少

定位疊放次序z-index

在使用定位布局時(shí)闷串,可能會出現(xiàn)盒子重疊的情況瓮钥。此時(shí),可以使用z-index來控制盒子的前后次序(z軸)
選擇器 { z-index: 1; }

  • 數(shù)值可以是正整數(shù)窿克、負(fù)整數(shù)或0骏庸,默認(rèn)是auto毛甲,數(shù)值越大年叮,盒子越靠上
  • 如果屬性值相同,則按照書寫順序玻募,后來居上
  • 數(shù)字后面不能加單位
  • 只有定位的盒子才有z-index屬性

絕對定位的盒子居中

加了絕對定位的盒子不能通過margin:0 auto;水平居中只损,但是可以通過以下計(jì)算方式實(shí)現(xiàn)水平和垂直居中。

  1. left:50%;讓盒子的左側(cè)移動到父級元素的水平中心位置
  2. margin-left:-100px;讓盒子向左移動自身寬度的一半七咧。

定位特殊特性

絕對定位和固定定位也和浮動類似

  1. 行內(nèi)元素添加絕對或者固定定位跃惫,可以直接設(shè)置高度和寬度。
  2. 塊級元素添加絕對或者固定定位艾栋,如果不給寬度或者高度爆存,默認(rèn)大小是內(nèi)容的大小
  3. 脫標(biāo)的盒子不會觸發(fā)外邊距塌陷
    浮動元素、絕對定位蝗砾、固定定位的元素都不會觸發(fā)外邊距合并的問題
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末先较,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子悼粮,更是在濱河造成了極大的恐慌闲勺,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,948評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件扣猫,死亡現(xiàn)場離奇詭異菜循,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)申尤,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,371評論 3 385
  • 文/潘曉璐 我一進(jìn)店門癌幕,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人昧穿,你說我怎么就攤上這事序芦。” “怎么了粤咪?”我有些...
    開封第一講書人閱讀 157,490評論 0 348
  • 文/不壞的土叔 我叫張陵谚中,是天一觀的道長。 經(jīng)常有香客問我,道長宪塔,這世上最難降的妖魔是什么磁奖? 我笑而不...
    開封第一講書人閱讀 56,521評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮某筐,結(jié)果婚禮上比搭,老公的妹妹穿的比我還像新娘。我一直安慰自己南誊,他們只是感情好身诺,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,627評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著抄囚,像睡著了一般霉赡。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上幔托,一...
    開封第一講書人閱讀 49,842評論 1 290
  • 那天穴亏,我揣著相機(jī)與錄音,去河邊找鬼重挑。 笑死嗓化,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的谬哀。 我是一名探鬼主播刺覆,決...
    沈念sama閱讀 38,997評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼史煎!你這毒婦竟也來了谦屑?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,741評論 0 268
  • 序言:老撾萬榮一對情侶失蹤劲室,失蹤者是張志新(化名)和其女友劉穎伦仍,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體很洋,經(jīng)...
    沈念sama閱讀 44,203評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡充蓝,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,534評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了喉磁。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片谓苟。...
    茶點(diǎn)故事閱讀 38,673評論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖协怒,靈堂內(nèi)的尸體忽然破棺而出涝焙,到底是詐尸還是另有隱情,我是刑警寧澤孕暇,帶...
    沈念sama閱讀 34,339評論 4 330
  • 正文 年R本政府宣布仑撞,位于F島的核電站赤兴,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏隧哮。R本人自食惡果不足惜桶良,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,955評論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望沮翔。 院中可真熱鬧陨帆,春花似錦、人聲如沸采蚀。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,770評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽纲爸。三九已至,卻和暖如春璧眠,著一層夾襖步出監(jiān)牢的瞬間缩焦,已是汗流浹背读虏。 一陣腳步聲響...
    開封第一講書人閱讀 32,000評論 1 266
  • 我被黑心中介騙來泰國打工责静, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人盖桥。 一個(gè)月前我還...
    沈念sama閱讀 46,394評論 2 360
  • 正文 我出身青樓灾螃,卻偏偏與公主長得像,于是被迫代替她去往敵國和親揩徊。 傳聞我的和親對象是個(gè)殘疾皇子腰鬼,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,562評論 2 349