分享CSS中的關於position:relative;有什麼作用？
- 黄舟原創
- 2017-07-19 14:39:232202瀏覽
對於css中的position:relative;我始終搞不懂它是什麼意思，有什麼作用？
對於position的其它幾個屬性，我都搞懂了
引用
static : 無特殊定位，物件遵循HTML定位規則
absolute : 將物件從文件流中拖出，使用left，right，top，bottom等屬性進行絕對定位。而其層疊透過z-index屬性定義。此時物件不具有邊距，但仍有補白與邊框
relative : 物件不可層疊，但將依據left，right，top，bottom等屬性在正常文件流中偏移位置
fixed : IE5. 5及NS6尚不支援此屬性
對於文件中所說的幾個屬性，除了relative，其它的一試，就效果出來了，對於個relative，真是難理解。
要說是相對定位嘛，也不是。
對於頁面中一個static的div#demo，我想讓這個#demo裡的一個div#sub相對於#demo定位在右上角的某個地方，應該是用這個position:relative這個吧，然後再加上top,right給限制一下。
我懂得沒有錯?
不過在現實開發中，我卻常常 無法得到預期的效果。我覺得應該是我對這個屬性還沒有理解透。現在我想完全掌握這個，就像position:absolute那樣地掌握它，想怎麼弄html元素就怎麼弄HTML元素。
請理解這一點的朋友們給講講，或是給點資料，連結之類 的也可以。
謝謝你們。
問題補充：
謝謝您 提供的鏈接，不過它沒有深度，我希望得到position:relative的詳細的理解。
問題補充：
reeze，你說的這一點很好。
不過，對於宣告了這屬性的本身的元素的定位呢？它本身的top，left,right,bottom有什麼作用？
你所講的是relative的子元素的行為啊。我想知道它自己的一些資訊。
問題補充：
就沒有大大給點根本的解釋嗎？
"對於頁面中一個static的div#demo，我想讓這個#demo裡的一個div#sub相對於#demo定位在右上角的某個地方，應該是用這個position:relative這個吧，然後再加上top,right給限制一下。 static，（也就是說對於任一個元素，如果沒有定義它的position屬性，那麼它的position:static）
如果你想讓這個#demo裡的一個div#sub相對於#demo定位在右上角的某個地方，應該給#demo相對定位，#sub絕對定位。
absolute是相對於自己最近的父元素來定位的，如果你不給#demo相對定位，那麼#sub的絕對定位就是相對於body來定位的。
relative是相對於自己來定位的，例如：#demo{position:relative;top:-50px;},這時#demo會在相對於它原來的位置上移50px。
另：relative 不脫離文件流，absolute 脫離文件流。也就是說：relative 的元素儘管表面上看到它偏離了原來的位置，但它實際上在文檔流中還是沒變。 absolute的元素不僅位置改變了，同時也脫離了文件流。
寫了一個例子如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>position</title>
<style type="text/css">
<!--
body{
font-size:12px;
margin:0 auto;
}
div#demo{
position:relative;
border:1px solid #000;
margin:50px;
top:-50px;
line-height:18px;
overflow:hidden;
clear:both;
height:1%;
}
div#sub{
position:absolute;
right:10px;
top:10px;
}
div.relative{
position:relative;
left:400px;
top:-20px;
}
div.static,div.fixed,div.absolute,div.relative{
width:300px;
}
div.static{
background-color:#bbb;
position:static;
}
div.fixed{
background-color:#ffc0cb;
}
div.absolute{
background-color:#b0c4de;
}
div.relative{
background-color:#ffe4e1;
}
-->
</style>
</head>
<body>
<div id="demo">
<div class="static">static: 默认值。无特殊定位，对象遵循HTML定位规则 </div>
<div id="sub" class="absolute">absolute: 将对象从文档流中拖出,使用left,right,top,bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据body对象。而其层叠通过z-index属性定义 </div>
<div class="fixed">fixed:未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范 </div>
<div class="relative">relative:对象不可层叠，但将依据 left,right,top,bottom 等属性在正常文档流中偏移位置 </div>
</div>
</body>
</html>以上是分享CSS中的關於position:relative;有什麼作用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！