眾所周知，前端CSS中，盒模型、浮動(dòng)、定位為必須掌握的三座大山。

今天就來聊聊定位的那些事。

定位是什么？

先來看看哪些場(chǎng)景用到定位，如下圖所示，凡是有盒子壓住另一個(gè)盒子的地方都可定位，因?yàn)橛酶?dòng)做不了，如果盒子浮動(dòng)，會(huì)并排但不會(huì)出現(xiàn)有層級(jí)的觀感。所以想要有層級(jí)的觀感，就得用定位。

簡(jiǎn)單來說，定位就是將盒模型中的盒子顯示在我們想要的位置。

定位的語法

定位由position屬性和邊偏移屬性組成。

position屬性語法為：{position:屬性值}，常用值如下：

邊偏移屬性語法為：{邊偏移：屬性值}，常用值如下：

定位模式和用法

1、靜態(tài)定位static

靜態(tài)定位具備標(biāo)準(zhǔn)流特性，所有元素默認(rèn)靜態(tài)定位，靜態(tài)定位不能通過設(shè)置邊偏移改變位置。

靜態(tài)定位的作用：取消定位。

2、相對(duì)定位relative

相對(duì)定位在標(biāo)準(zhǔn)流中，采用相對(duì)定位的盒子仍然占用原來的位置。每次移動(dòng)位置，以自己的左上角為基點(diǎn)移動(dòng)（相對(duì)于自己移動(dòng)位置）

3、絕對(duì)定位absolute

絕對(duì)定位不具備標(biāo)準(zhǔn)流特性，采用絕對(duì)定位的盒子在設(shè)置邊偏移后不占位置。

絕對(duì)定位的盒子在父級(jí)沒有定位時(shí)，以瀏覽器為準(zhǔn)對(duì)齊；當(dāng)父級(jí)有定位，依據(jù)最近的已定位的父元素進(jìn)行定位。

4、固定定位fixed

固定定位不具備標(biāo)準(zhǔn)流特性，不占位置，始終以瀏覽器為標(biāo)準(zhǔn)顯示位置，不管瀏覽器滾動(dòng)和窗口大小，fixed顯示固定。

終極用法口訣：子絕父相，或子絕父絕。

就是說，在實(shí)際開發(fā)過程中，子盒子采用絕對(duì)定位，那么父盒子必定采用相對(duì)定位或絕對(duì)定位。

如果要實(shí)現(xiàn)絕對(duì)定位的盒子水平或垂直居中需要采用一定的算法。因?yàn)榧佣ㄎ挥衅坪透?dòng)的盒子通過設(shè)置margin值實(shí)現(xiàn)水平居中失效。那么采用以下方法：

先設(shè)置左邊偏移50%，50%表示父盒子的一半，即left：50%。

再設(shè)置自己盒子外邊距為盒子寬度負(fù)的一半，即margin-left：-width/2。

定位模式轉(zhuǎn)換

當(dāng)盒子加fixed和absolute定位，元素轉(zhuǎn)換為行內(nèi)塊元素。

如果盒子固定定位，當(dāng)盒子內(nèi)容為空時(shí)，盒子的高度會(huì)為0，為避免這種情況可設(shè)置盒子的寬高，再設(shè)置下面的盒子的margin值，可實(shí)現(xiàn)top通欄固定不動(dòng)。如下圖的首頁展示固定top通欄。

層級(jí)z-index

當(dāng)定位元素重疊，可通過z-index設(shè)置層疊次序。

層級(jí)z-index只針對(duì)定位的元素，標(biāo)準(zhǔn)流和浮動(dòng)不具備該屬性。

層級(jí)z-index的用法：z-index:2;后面沒有單位。

采用相對(duì)定位比標(biāo)準(zhǔn)流高一層級(jí)，浮在上面。

盒子已經(jīng)用相對(duì)定位，但是鼠標(biāo)放上去還想用相對(duì)定位，就可用z-index。

取值相同時(shí)，根據(jù)書寫順序，后來居上。

默認(rèn)為0，值越大層級(jí)越高。

當(dāng)前標(biāo)題：前端開發(fā)中學(xué)習(xí)”定位“的那些事。
轉(zhuǎn)載來于：http://chinadenli.net/news8/104708.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、網(wǎng)站設(shè)計(jì)、靜態(tài)網(wǎng)站、云服務(wù)器、動(dòng)態(tài)網(wǎng)站、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)