站長(zhǎng)資訊網(wǎng)在css中，relative的用法是“position:relative”。relative代表相對(duì)定位，如果對(duì)一個(gè)元素進(jìn)行相對(duì)定位，它將出現(xiàn)在它所在的位置上；可以通過設(shè)置垂直或水平位置，讓這個(gè)元素“相對(duì)于”它的起點(diǎn)進(jìn)行移動(dòng)。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
首先我們來簡(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;
例子：
<html> <head> <style type="text/css"> h2.pos_left { position: relative; left: -20px; } h2.pos_right { position: relative; left: 20px; } </style> </head> <body> <h2>這是位于正常位置的標(biāo)題</h2> <h2 class="pos_left">這個(gè)標(biāo)題相對(duì)于其正常位置向左移動(dòng)</h2> <h2 class="pos_right">這個(gè)標(biāo)題相對(duì)于其正常位置向右移動(dòng)</h2> </body> </html>
效果：
看完了上述的例子我們大概知道了相對(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è)例子：
<html> <head> <style type="text/css"> .box { overflow: hidden; width: 50px; height: 50px; background-color: #dddddd; } .son { position: absolute; width: 100px; height: 100px; background-color: #cd0000; } </style> </head> <body> <div class="box"> <div class="son"></div> </div> <div class="box" style="position: relative"> <div class="son"></div> </div> </body> </html>
效果：
在這個(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。
