您好,登錄后才能下訂單哦!
今天就跟大家聊聊有關(guān)怎么用CSS relative,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
在css的position屬性中有四個(gè)屬性值:static(靜態(tài)的)、relative(相對(duì)的)、fixed(固定的)、absolute(絕對(duì)的),今天的這篇文章就來(lái)給大家介紹一下CSS中relative(相對(duì))定位的用法
首先我們來(lái)簡(jiǎn)單看一下relative(相對(duì))定位的概念
根據(jù)W3C上的定義我們可以知道相對(duì)定位是一個(gè)非常容易掌握的概念。如果對(duì)一個(gè)元素進(jìn)行相對(duì)定位,它將出現(xiàn)在它所在的位置上。然后,可以通過(guò)設(shè)置垂直或水平位置,讓這個(gè)元素“相對(duì)于”它的起點(diǎn)進(jìn)行移動(dòng)。
簡(jiǎn)而言之,設(shè)置為相對(duì)定位的元素框會(huì)偏移某個(gè)距離。元素仍然保持其未定位前的形狀,它原本所占的空間仍保留。
看完了css relative(相對(duì))定位的概念后,我們就來(lái)詳細(xì)說(shuō)一說(shuō)relative的用法
對(duì)于相對(duì)定位在css中我們都這樣使用:position: relative;
我們先來(lái)看一個(gè)例子
<html> <head> <style type="text/css"> h3.pos_left { position:relative; left:-20px } h3.pos_right { position:relative; left:20px } </style> </head> <body> <h3>這是位于正常位置的標(biāo)題</h3> <h3 class="pos_left">這個(gè)標(biāo)題相對(duì)于其正常位置向左移動(dòng)</h3> <h3 class="pos_right">這個(gè)標(biāo)題相對(duì)于其正常位置向右移動(dòng)</h3> </body> </html>
效果如下:
看完了上述的例子我們大概知道了相對(duì)定位的一個(gè)簡(jiǎn)單的用法,接下來(lái)我們就來(lái)看看相對(duì)定位的其他用法。
relative對(duì)absolute的限制作用
我們知道,absolute定位的是其第一個(gè)祖先元素定位屬性不為static屬性,如果沒(méi)有relative或者fixed定位的情況下,給absolute添加top/left、right/bottom等屬性可以發(fā)生偏移,但是如果給父元素添加position: relative之后,則absolute的偏移能力被父元素限制住了。
relative對(duì)overflow的限制作用
我們來(lái)看一個(gè)例子:
<div class="box"> <div class="son"></div></div> <div class="box" style="position: relative"> <div class="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的限制作用
頁(yè)面中的倆個(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)注億速云行業(yè)資訊頻道,感謝大家的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。