CSS相對定位和絕對定位

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

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

為什么要學(xué)定位

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

元素的定位屬性

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

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

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

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

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

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

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

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

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

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

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

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

子絕父相

一般來說，子級是絕對定位的話，父親要用相對定位。

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

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

絕對定位的盒子水平/垂直居中

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

加了定位的或浮動的盒子，margin:auto就會失效。

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

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

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

定位模式轉(zhuǎn)換

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