CSS相對(duì)定位和絕對(duì)定位

xinhaip 發(fā)布于2019-08-30 15:54 / 1734人閱讀

摘要：三絕對(duì)定位拼爹型絕對(duì)定位不占有位置。父級(jí)有定位絕對(duì)定位是將元素依據(jù)最近的已經(jīng)定位絕對(duì)固定或相對(duì)的父元素祖先進(jìn)行定位。絕對(duì)定位的盒子水平垂直居中普通盒子左右居中用即可，但對(duì)于絕對(duì)定位的就無效了。

為什么要學(xué)定位

定位是CSS中的難點(diǎn)和重點(diǎn)，特別是后面學(xué)javascript特效時(shí)候，比如實(shí)現(xiàn)下拉菜單、彈框等，要蓋住下面內(nèi)容又不會(huì)影響下面內(nèi)容，比如要超出盒子一部分，比如屏幕中有一個(gè)小彈窗飄來飄去的，再比如要放在盒子中任意位置，都必須用定位來做，一定要搞清楚。
定位類似于浮動(dòng)，脫離標(biāo)準(zhǔn)流，但又不同于浮動(dòng)，它可以放在任何地方。

元素的定位屬性

元素的定位屬性主要包括定位模式和邊偏移兩部分。
1.邊偏移：告訴盒子往哪兒走
2.定位模式（定位的分類）

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

所有元素的默認(rèn)定位方式，網(wǎng)頁中所有元素都默認(rèn)的是靜態(tài)定位，其實(shí)就是標(biāo)準(zhǔn)流的特性。

靜態(tài)定位唯一的用處，就是取消定位。

例如有些網(wǎng)站的欄目，往下劃的時(shí)候會(huì)出現(xiàn)，往上劃到頂部的時(shí)候又消失了，欄目一會(huì)兒有定位一會(huì)兒沒有定位，實(shí)現(xiàn)方式就是一會(huì)兒加個(gè)固定定位，一會(huì)兒用static取消固定定位。

二、相對(duì)定位(relative)--自戀型

相對(duì)定位是將元素相對(duì)于它在標(biāo)準(zhǔn)流中的位置進(jìn)行定位，即每次移動(dòng)的位置，是以自己的左上角為基點(diǎn)移動(dòng)的。例如設(shè)置了margin，則以margin后的左上角位置來移動(dòng)。

對(duì)元素設(shè)置相對(duì)定位后，可以通過邊偏移屬性來改變?cè)匚恢?，但它在文檔流中的位置繼續(xù)占有。

注意：
1.相對(duì)定位最重要的一點(diǎn)是，它可以通過邊偏移移動(dòng)位置，但是原來所占的位置，繼續(xù)占有。
2.其次，每次移動(dòng)的位置，是以自己的左上角為基點(diǎn)移動(dòng)。
如果說浮動(dòng)的主要目的是讓多個(gè)塊級(jí)元素一行顯示，那么定位的主要價(jià)值是移動(dòng)位置，讓盒子到我們想要的位置上去。

三、絕對(duì)定位(absolute)--拼爹型

絕對(duì)定位不占有位置。
1.父級(jí)沒有定位
若所有父元素都沒有定位，或沒有父親，則以瀏覽器左上角為準(zhǔn)對(duì)齊。

2.父級(jí)有定位
絕對(duì)定位是將元素依據(jù)最近的已經(jīng)定位（絕對(duì)、固定或相對(duì)）的父元素（祖先）進(jìn)行定位。例如父親沒有定位，爺爺有定位，則根據(jù)爺爺進(jìn)行定位。

子絕父相

一般來說，子級(jí)是絕對(duì)定位的話，父親要用相對(duì)定位。

因?yàn)槿绻赣H用絕對(duì)定位，它不占文檔位置，后面的紫色盒子就會(huì)蓋住藍(lán)色的盒子，并不是我們想要的效果。

網(wǎng)站上經(jīng)常用到的類似的小箭頭，都是用絕對(duì)定位做的，因?yàn)榻^對(duì)定位不占文檔位置。

絕對(duì)定位的盒子水平/垂直居中

普通盒子左右居中用margin:aotu即可，但對(duì)于絕對(duì)定位的就無效了。

加了定位的或浮動(dòng)的盒子，margin:auto就會(huì)失效。

可以用一下方法：
1.首先left:50%，此時(shí)盒子左邊對(duì)齊瀏覽器中線；
2.然后margin-left:-a(a為盒子寬度的一半），讓盒子往右走自己寬度的一半。

四、固定定位（fixed）--認(rèn)死理型

1.固定定位元素跟父親沒有任何關(guān)系，只認(rèn)瀏覽器；
2.固定定位完全脫標(biāo)，不占位置，不隨著滾動(dòng)條滾動(dòng)。

定位模式轉(zhuǎn)換

跟浮動(dòng)一樣，元素添加了絕對(duì)定位和固定定位之后，元素模式也會(huì)發(fā)生轉(zhuǎn)換，都轉(zhuǎn)換為行內(nèi)塊元素，因此行內(nèi)元素若添加了絕對(duì)定位、固定定位、浮動(dòng)后，可以不用轉(zhuǎn)換模式，直接給高度和寬度即可。
注意：行內(nèi)塊元素的高寬和內(nèi)容有關(guān)系。