CSS中的position:relative;的作用示例介紹

2024-07-11 08:51:30

字體：大中小

供稿：網(wǎng)友

引用

static : 　無特殊定位，對象遵循HTML定位規(guī)則
absolute : 　將對象從文檔流中拖出，使用left，right，top，bottom等屬性進(jìn)行絕對定位。而其層疊通過z-index屬性定義。此時(shí)對象不具有邊距，但仍有補(bǔ)白和邊框
relative : 　對象不可層疊，但將依據(jù)left，right，top，bottom等屬性在正常文檔流中偏移位置
fixed : 　IE5.5及NS6尚不支持此屬性

"對于頁面中一個(gè)static的div#demo，我想讓這個(gè)#demo里的一個(gè)div#sub相對于#demo定位在右上角的某個(gè)地方，應(yīng)該是用這個(gè)position:relative這個(gè)吧，然后再加上top,right給限制一下。
我理解得沒有錯(cuò)吧? "
首先對你疑惑的地方，我先解答一下：
position的默認(rèn)值是static，（也就是說對于任意一個(gè)元素，如果沒有定義它的position屬性，那么它的position:static）
如果你想讓這個(gè)#demo里的一個(gè)div#sub相對于#demo定位在右上角的某個(gè)地方，應(yīng)該給#demo相對定位，#sub絕對定位。
absolute是相對于自己最近的父元素來定位的，如果你不給#demo相對定位，那么#sub的絕對定位就是相對于body來定位的。
relative是相對于自己來定位的，例如：#demo{position:relative;top:-50px;},這時(shí)#demo會(huì)在相對于它原來的位置上移50px。
另：relative 不脫離文檔流，absolute 脫離文檔流。也就是說：relative 的元素盡管表面上看到它偏離了原來的位置，但它實(shí)際上在文檔流中還是沒變。absolute的元素不僅位置改變了，同時(shí)也脫離了文檔流。

寫了個(gè)例子如下：

復(fù)制代碼

上一篇：CSS3 :nth-child()偽類選擇器實(shí)現(xiàn)奇偶行顯示不同樣式

下一篇：div css 實(shí)現(xiàn)tabs標(biāo)簽的思路及示例代碼