今天小編給大家分享一下CSS中如何使用relative屬性實(shí)現(xiàn)相對(duì)定位的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

創(chuàng)新互聯(lián)建站專注于澄海網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供澄海營銷型網(wǎng)站建設(shè)，澄海網(wǎng)站制作、澄海網(wǎng)頁設(shè)計(jì)、澄海網(wǎng)站官網(wǎng)定制、重慶小程序開發(fā)服務(wù)，打造澄海網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供澄海網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

CSS relative相對(duì)定位

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

CSS 相對(duì)定位

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

如果將 top 設(shè)置為 20px，那么框?qū)⒃谠恢庙敳肯旅?20 像素的地方。如果 left 設(shè)置為 30 像素，那么會(huì)在元素左邊創(chuàng)建 30 像素的空間，也就是將元素向右移動(dòng)。

#box_relative {    position: relative;    left: 30px;    top: 20px;  }

如下圖所示：

注意，在使用相對(duì)定位時(shí)，無論是否進(jìn)行移動(dòng)，元素仍然占據(jù)原來的空間。因此，移動(dòng)元素會(huì)導(dǎo)致它覆蓋其它框。

CSS 相對(duì)定位實(shí)例

         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)   
相對(duì)定位會(huì)按照元素的原始位置對(duì)該元素進(jìn)行移動(dòng)。
   
樣式 "left:-20px" 從元素的原始左側(cè)位置減去 20 像素。  
   
樣式 "left:20px" 向元素的原始左側(cè)位置增加 20 像素。  
       

以上就是“CSS中如何使用relative屬性實(shí)現(xiàn)相對(duì)定位”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。