快捷導(dǎo)航

Position屬性之relative用法

更新時(shí)間：2015年12月14日 09:25:01 投稿：mrr

Relative是position的一個(gè)屬性，是相對(duì)定位，通過本篇文章給大家介紹Position屬性之relative用法，對(duì)position屬性relative相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧

Relative是position的一個(gè)屬性，是相對(duì)定位。

position的默認(rèn)值是static，（也就是說對(duì)于任意一個(gè)元素，如果沒有定義它的position屬性，那么它的position:static）

如果你想讓這個(gè)#demo里的一個(gè)div#sub相對(duì)于#demo定位在右上角的某個(gè)地方，應(yīng)該給#demo相對(duì)定位，#sub絕對(duì)定位。

absolute是相對(duì)于自己最近的父元素來定位的，如果你不給#demo相對(duì)定位，那么#sub的絕對(duì)定位就是相對(duì)于body來定位的。

relative是相對(duì)于自己來定位的，例如：#demo{position:relative;top:-50px;},這時(shí)#demo會(huì)在相對(duì)于它原來的位置上移50px。

另：relative 不脫離文檔流，absolute 脫離文檔流。也就是說：relative 的元素盡管表面上看到它偏離了原來的位置，但它實(shí)際上在文檔流中還是沒變。absolute的元素不僅位置改變了，同時(shí)也脫離了文檔流。

position:relative日常應(yīng)用的時(shí)候一般是設(shè)置給position:absolute;的父層的,父層position:relative; 子層position:absolute;的話, 就是依照父層的邊界進(jìn)行定位的, 不然position:absolute 會(huì)逐層向上尋找設(shè)置了position:relative的元素邊界, 直到body元素..

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

Html代碼

static: 默認(rèn)值。無特殊定位，對(duì)象遵循HTML定位規(guī)則

absolute: 將對(duì)象從文檔流中拖出,使用left,right,top,bottom 等屬性相對(duì)于其最接近的一個(gè)最有定位設(shè)置的父對(duì)象進(jìn)行絕對(duì)定位。

如果不存在這樣的父對(duì)象,則依據(jù)body對(duì)象。而其層疊通過z-index屬性定義

fixed:未支持。對(duì)象定位遵從絕對(duì)(absolute)方式。但是要遵守一些規(guī)范

relative:對(duì)象不可層疊，但將依據(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)值。無特殊定位，對(duì)象遵循HTML定位規(guī)則 </div> 
    <div id="sub" class="absolute">absolute: 將對(duì)象從文檔流中拖出,使用left,right,top,bottom 等屬性相對(duì)于其最接近的一個(gè)最有定位設(shè)置的父對(duì)象進(jìn)行絕對(duì)定位。如果不存在這樣的父對(duì)象,則依據(jù)body對(duì)象。而其層疊通過z-index屬性定義 </div> 
    <div class="fixed">fixed:未支持。對(duì)象定位遵從絕對(duì)(absolute)方式。但是要遵守一些規(guī)范 </div> 
    <div class="relative">relative:對(duì)象不可層疊，但將依據(jù) left,right,top,bottom 等屬性在正常文檔流中偏移位置 </div> 
  </div> 
</body> 
</html>

以上所述是小編給大家分享的position屬性之relative用法的全部敘述，希望大家喜歡。

您可能感興趣的文章: