這篇文章主要介紹CSS中的relative怎么用，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

員工經(jīng)過長期磨合與沉淀，具備了協(xié)作精神，得以通過團(tuán)隊(duì)的力量開發(fā)出優(yōu)質(zhì)的產(chǎn)品。創(chuàng)新互聯(lián)堅(jiān)持“專注、創(chuàng)新、易用”的產(chǎn)品理念，因?yàn)椤皩Ｗ⑺詫I(yè)、創(chuàng)新互聯(lián)網(wǎng)站所以易用所以簡單”。公司專注于為企業(yè)提供成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、微信公眾號(hào)開發(fā)、電商網(wǎng)站開發(fā)，成都小程序開發(fā)，軟件按需開發(fā)網(wǎng)站等一站式互聯(lián)網(wǎng)企業(yè)服務(wù)。

首先我們來簡單看一下relative（相對(duì)）定位的概念

根據(jù)W3C上的定義我們可以知道相對(duì)定位是一個(gè)非常容易掌握的概念。如果對(duì)一個(gè)元素進(jìn)行相對(duì)定位，它將出現(xiàn)在它所在的位置上。然后，可以通過設(shè)置垂直或水平位置，讓這個(gè)元素“相對(duì)于”它的起點(diǎn)進(jìn)行移動(dòng)。

簡而言之，設(shè)置為相對(duì)定位的元素框會(huì)偏移某個(gè)距離。元素仍然保持其未定位前的形狀，它原本所占的空間仍保留。

看完了cssrelative（相對(duì)）定位的概念后，我們就來詳細(xì)說一說relative的用法

對(duì)于相對(duì)定位在css中我們都這樣使用：position:relative;

我們先來看一個(gè)例子

h3.pos_left

{

position:relative;

left:-20px

}

h3.pos_right

{

position:relative;

left:20px

}

這是位于正常位置的標(biāo)題

這個(gè)標(biāo)題相對(duì)于其正常位置向左移動(dòng)

這個(gè)標(biāo)題相對(duì)于其正常位置向右移動(dòng)

效果如下：

360截圖20181105105914007.jpg

看完了上述的例子我們大概知道了相對(duì)定位的一個(gè)簡單的用法，接下來我們就來看看相對(duì)定位的其他用法。

relative對(duì)absolute的限制作用

我們知道，absolute定位的是其第一個(gè)祖先元素定位屬性不為static屬性，如果沒有relative或者fixed定位的情況下，給absolute添加top/left、right/bottom等屬性可以發(fā)生偏移，但是如果給父元素添加position:relative之后，則absolute的偏移能力被父元素限制住了。

relative對(duì)overflow的限制作用

我們來看一個(gè)例子：