javascript當中relative或absolute用法
4.relative或absolute
馬克-to-win：如何放置絕對正中的位置。專案心得：正常來講，div絕對定位預設的是以body標籤為參照，而且無論你的絕對定位的div外面有幾層父div，但是當你把其中一個父div設定成position:relative;那麼被絕對定位的div就會以這個div為參照。比如專案中index.html中的mysubtop1這個div就必須設成relative，它裡面的div才會以它為參照系。
例 1.4.1
CenterAbsoluteIEFF.html
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Center</title>
<style>
div {width:500px; height:500px; background:#f11; position:absolute; top:50%; left:50%; margin-left:-250px; margin-top:-250px;font-size:16px }
</style>
</head>
<body>
<div>馬克-to-win:margin-left：正數向右偏移,負數向左偏移。position:absolute; 左右上下居中方法且ie和火狐相容的完美方法。1）這需要技巧：left:50%就把div的左上角放在正中間，margin-left: 100px, 就把div放在正中間右邊100px，margin-left: -250px, 就把div放在正中間左邊250px，
2）垂直方向也是完美相容。3）但想要垂直和水平相容， 必須把兩個瀏覽器的視窗調成一模一樣， 甚至左右上下的滾動條（注意ie比火狐多一個滾動條， 得把他刨除在外）。4）火狐有個檢視/縮放/重置， 一定注意這個縮放要放成重置， 因為它也會影響兩個瀏覽器看上去的相容性。
</div>
</body>
</html>
例 1.4.2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<head>
<meta charset="UTF-8">
<title>z-index越大，越在前面</title>
<style type="text/css">
.wai{position:absolute;top:60px;left:60px;width:240px;height:240px;z-index:1;border: 1px solid #00ff00;}
.r, .a{width:60px;height:60px;text-align:center;color:#FFF;}
.r{position:relative;background-color:green;top:60px;left:60px;z-index:10;}
.a{position:absolute;background-color:red;top:0px;left:0px;z-index:14;}
</style>
</head>
<body>
<div class="wai">aaa馬克-to-win
<div class="r">regre</div>
<div class="a">abred</div>
</div>
</body>
</html>
參考本章relativeAbsolute網上例子參考.html
更多內容請見原文，文章轉載自：