今天就跟大家聊聊有關(guān)怎么用CSS relative，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的武漢網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

 在css的position屬性中有四個(gè)屬性值：static（靜態(tài)的）、relative（相對(duì)的）、fixed（固定的）、absolute（絕對(duì)的），今天的這篇文章就來給大家介紹一下CSS中relative（相對(duì)）定位的用法

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

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

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

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

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

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

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

效果如下：

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

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

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

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

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

.box{
    overflow: hidden;
   width: 50px;
    height: 50px;
    background-color: #dddddd;
}
.son{
    position: absolute;
   width: 100px;
    height: 100px;
    background-color: #cd0000;
}

在這個(gè)例子中，.box的寬和高都是50px，而.son元素的寬和高都是100px，雖然.box元素設(shè)置了overflow:hidden，但依然限制不了.son元素的大小，其寬和高都是100px，而當(dāng).box設(shè)置了定位屬性relative后，.son元素的寬和高就變成了50px。

relative對(duì)層級(jí)z-index的限制作用

頁面中的倆個(gè)absolute的z-index不同,有各自的層級(jí),當(dāng)這兩個(gè)absolute的父類都有relative的時(shí)候,它們的層級(jí)就依賴于父類的relative的z-index。

看完上述內(nèi)容，你們對(duì)怎么用CSS relative有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)頁標(biāo)題：怎么用CSSrelative-創(chuàng)新互聯(lián)
URL分享：http://weahome.cn/article/ddhgjp.html