Position屬性之relative用法
Relative是position的一個屬性，是相對定位。
position的默認(rèn)值是static，（也就是說對于任意一個元素，如果沒有定義它的position屬性，那么它的position:static）
如果你想讓這個#demo里的一個div#sub相對于#demo定位在右上角的某個地方，應(yīng)該給#demo相對定位，#sub絕對定位。
absolute是相對于自己最近的父元素來定位的，如果你不給#demo相對定位，那么#sub的絕對定位就是相對于body來定位的。
relative是相對于自己來定位的，例如：#demo{position:relative;top:-50px;},這時#demo會在相對于它原來的位置上移50px。
另：relative 不脫離文檔流，absolute 脫離文檔流。也就是說：relative 的元素盡管表面上看到它偏離了原來的位置，但它實際上在文檔流中還是沒變。absolute的元素不僅位置改變了，同時也脫離了文檔流。
position:relative日常應(yīng)用的時候一般是設(shè)置給position:absolute;的父層的,父層position:relative; 子層position:absolute;的話, 就是依照父層的邊界進(jìn)行定位的, 不然position:absolute 會逐層向上尋找設(shè)置了position:relative的元素邊界, 直到body元素..
寫了個例子如下：
Html代碼
static: 默認(rèn)值。無特殊定位，對象遵循HTML定位規(guī)則
absolute: 將對象從文檔流中拖出,使用left,right,top,bottom 等屬性相對于其最接近的一個最有定位設(shè)置的父對象進(jìn)行絕對定位。
如果不存在這樣的父對象,則依據(jù)body對象。而其層疊通過z-index屬性定義
fixed:未支持。對象定位遵從絕對(absolute)方式。但是要遵守一些規(guī)范
relative:對象不可層疊，但將依據(jù) left,right,top,bottom 等屬性在正常文檔流中偏移位置
" quality="high" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
<!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: 默認(rèn)值。無特殊定位，對象遵循HTML定位規(guī)則 </div>
<div id="sub" class="absolute">absolute: 將對象從文檔流中拖出,使用left,right,top,bottom 等屬性相對于其最接近的一個最有定位設(shè)置的父對象進(jìn)行絕對定位。如果不存在這樣的父對象,則依據(jù)body對象。而其層疊通過z-index屬性定義 </div>
<div class="fixed">fixed:未支持。對象定位遵從絕對(absolute)方式。但是要遵守一些規(guī)范 </div>
<div class="relative">relative:對象不可層疊，但將依據(jù) left,right,top,bottom 等屬性在正常文檔流中偏移位置 </div>
</div>
</body>
</html>
以上所述是小編給大家分享的position屬性之relative用法的全部敘述，希望大家喜歡。
相關(guān)文章
這篇文章主要介紹了微信小程序常見頁面跳轉(zhuǎn)操作,結(jié)合簡單實例形式總結(jié)分析了微信小程序保留頁面跳轉(zhuǎn)、關(guān)閉頁面跳轉(zhuǎn)、返回上一級頁面等各種常見的跳轉(zhuǎn)操作實現(xiàn)技巧,需要的朋友可以參考下2019-05-05
原生javascript實現(xiàn)Tab選項卡切換功能
本文主要介紹了使用原生javascript實現(xiàn)Tab選項卡切換的功能，雖然jQuery有很多類似的插件，單jQuery庫著實有點龐大，這種小功能還是直接用javascript來做就好了。2015-01-01
JavaScript極簡入門教程（二）：對象和函數(shù)
這篇文章主要介紹了JavaScript極簡入門教程（二）：對象和函數(shù),本文講解了對象基礎(chǔ)知識、函數(shù)基礎(chǔ)知識、函數(shù)調(diào)用、異常、繼承等內(nèi)容,需要的朋友可以參考下2014-10-10
element-ui 時間選擇器限制范圍的實現(xiàn)（隨動）
這篇文章主要介紹了element-ui 時間選擇器限制范圍（隨動）,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
JavaScript小數(shù)在做四則運算時，精度會丟失，這會在項目中引起諸多不便，先請看下面腳本。2009-10-10
這篇文章主要為大家詳細(xì)介紹了Ionic3 UI組件之Gallery Modal的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
本篇文章主要介紹了微信小程序（六）：列表上拉加載下拉刷新示例，非常具有實用價值，需要的朋友可以參考下。2017-01-01
Uni-app是一個基于Vue.js開發(fā)跨平臺應(yīng)用的框架,它可以將代碼編譯成多個平臺下的原生應(yīng)用,這篇文章主要給大家介紹了關(guān)于uni-app瀑布流效果的相關(guān)資料,需要的朋友可以參考下2023-12-12
這篇文章給大家介紹了如何使用js實現(xiàn)高精度加減乘除模板,文章通過代碼示例介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,感興趣的小伙伴可以自己動手嘗試一下2023-10-10
js獲取當(dāng)前地址 JS獲取當(dāng)前URL的示例代碼
本篇文章主要是對js獲取當(dāng)前地址 JS獲取當(dāng)前URL的示例代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02