Position 定位說明 @ 雲橙雨林

Position 定位

Position 定位有四個值，分別為static 、absolute、relative、fixed。

我僅以我最常用的來說明 abolute relative，但不用學術的說法，以最簡單單一方法說明

應可解決網頁設計部份的排版問題。

先用圖來說明排版方式：

posistion 定位

html 寫法如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>posistion 定位</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
body {
background-color: #CCC;
width: 95%;
margin-right: auto;
margin-left: auto;
}
#top-header {
background-color: #0CF;
height: 120px;
width: 100%;
position: relative;
}
#top-nav ul {
list-style-type: none;
position: absolute;
left: 300px;
width: 400px;
top: 50px;
}
#top-nav ul li {
float: left;
display: block;
padding: 10px;
margin: 3px;
}
</style>
</head>

<body>
<header id="top-header">
<nav id="top-nav">
<ul>
<li>home</li>
<li>about</li>
<li>contant</li>
<li>link</li>
</ul>
</nav>
</header>
</body>
</html>

可得以下結果：

posiston2.fw

如果將top-header 裡的relative 取消，可發現畫面並無變化，但是只要將瀏灠器視窗放大或縮小時，亦可發現問題！試過可發現，其nav在視窗放大縮小時，他的位置永遠是在top:50px left:300px 位置，而top-header 會因放大或縮小時移動，即會top-header 和top-nav 不同步。

一般而言，我們都不希望排版時位置跑掉，而當位top-header 和 top-nav 不同步時，即排版位置移位了，這是因為top-header 和 top-nav 目前不為父子關係，所以，如果在top-header 裡的relative 取消的狀況下，他們算是獨立的個體，並非是父子關係，只有在設置這個選項後，top-nav就和 top-header為父子關係，亦可和top-headerqn 連動，亦不會因畫面的變化而產生排版變化了。

在未有智慧型手機和平版電腦的時代，因家裡的電腦一般都是17"左右的大小，大部也都設置在1024x768的像素中，所以此問題不大，但是現在因像素的變化，網頁的寫法，就更應注意！