CSS中的relative怎么用

這篇文章主要介紹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è)例子

<html>

<head>

<styletype="text/css">

h3.pos_left

{

position:relative;

left:-20px

}

h3.pos_right

{

position:relative;

left:20px

}

</style>

</head>

<body>

<h3>這是位于正常位置的標(biāo)題</h3>

<h3class="pos_left">這個(gè)標(biāo)題相對(duì)于其正常位置向左移動(dòng)</h3>

<h3class="pos_right">這個(gè)標(biāo)題相對(duì)于其正常位置向右移動(dòng)</h3>

</body>

</html>

效果如下：

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è)例子：

<divclass="box">

<divclass="son"></div></div>

<divclass="box"style="position:relative">

<divclass="son"></div></div>

.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。

以上是“CSS中的relative怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站欄目：CSS中的relative怎么用
當(dāng)前地址：http://muchs.cn/article22/piogcc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、網(wǎng)站內(nèi)鏈、外貿(mào)網(wǎng)站建設(shè)、微信小程序、用戶體驗(yàn)、手機(jī)網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容