這篇“CSS定位屬性之相對定位relative屬性怎么使用”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“CSS定位屬性之相對定位relative屬性怎么使用”文章吧。

成都創(chuàng)新互聯(lián)專注于企業(yè)營銷型網(wǎng)站、網(wǎng)站重做改版、武進(jìn)網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5建站、商城建設(shè)、集團公司官網(wǎng)建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為武進(jìn)等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

CSS定位屬性之相對定位relative屬性詳解

position:relative 相對定位詳解

相對定位是元素在移動位置的時候，是相對于它原來的位置來說的。

相對定位的特點：

• 它是相對于自己原來的位置來移動的(移動位置的時候參考點是自己原來的位置)

• 原來在標(biāo)準(zhǔn)流的位置繼續(xù)占有，后面的盒子仍然以標(biāo)準(zhǔn)流的方對待它(不脫標(biāo)，繼續(xù)保留原來的位置)。因此相對定位并沒有脫標(biāo)，它最典型的應(yīng)用是給絕對定位當(dāng)?shù)摹?/p>

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

CSS 相對定位

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

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

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

如下圖所示：

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

示例如下：

body{
    margin:10px;
    font-size:12px;
    font-family:Arial;
}
.outside{
    width:1000px;
    height:600px;
    background-color:#a9d6ff;
    border:1px dashed black;
}
 
.inside{
    padding:10px;
    background-color:#fffcd3;
    border:1px dashed black;
    margin: 10px;
}
 
.inside1{
    margin:10px;
    padding: 10px;
    background-color:#fffcd3;
    border:1px dashed black;
    /* 設(shè)置相對定位 ,相對點是當(dāng)前div的原始位置的左上角*/
    position: relative;
    /* 距離div的原始位置的左邊框 */
    left:20px;
    /* 距離div的原始位置的上邊框 */
    top:30px;
    /*
       right距離div的原始位置的右邊框
       bottom距離div的原始位置的下邊框
    */
}




    div1