定位一直是WEB標准應用中的難點，如果理不清楚定位那麼可能應實現的效果實現不了，實現了的效果可能會走樣。如果理清了定位的原理，那定位會讓網頁實現的更加完美。
定位的定義：
在CSS中關於定位的內容是：position:relative | absolute | static | fixed
static 沒有特別的設定，遵循基本的定位規定，不能通過z-index進行層次分級。
relative 不脫離文檔流，參考自身靜態位置通過 top,bottom,left,right 定位，並且可以通過z-index進行層次分級。
absolute 脫離文檔流，通過 top,bottom,left,right 定位。選取其最近的父級定位元素，當父級 position 為 static 時，absolute元素將以body坐標原點進行定位，可以通過z-index進行層次分級。
fixed 固定定位，這裡他所固定的對像是可視窗口而並非是body或是父級元素。可通過z-index進行層次分級。
CSS中定位的層疊分級：z-index: auto | namber;
auto 遵從其父對象的定位
namber 無單位的整數值。可為負數
定位的原理：
可以位移的元素 （相對定位）
在本文流中，任何一個元素都被文本流所限制了自身的位置，但是通過CSS我們依然使得這些元素可以改變自己的位置，我們可以通過float來讓元素浮動，我們也可以通過margin來讓元素產生位置移動
定位一直是WEB標准應用中的難點，如果理不清楚定位那麼可能應實現的效果實現不了，實現了的效果可能會走樣。如果理清了定位的原理，那定位會讓網頁實現的更加完美。
定位的定義：
在CSS中關於定位的內容是：position:relative | absolute | static | fixed
static 沒有特別的設定，遵循基本的定位規定，不能通過z-index進行層次分級。
relative 不脫離文檔流，參考自身靜態位置通過 top,bottom,left,right 定位，並且可以通過z-index進行層次分級。
absolute 脫離文檔流，通過 top,bottom,left,right 定位。選取其最近的父級定位元素，當父級 position 為 static 時，absolute元素將以body坐標原點進行定位，可以通過z-index進行層次分級。
fixed 固定定位，這裡他所固定的對像是可視窗口而並非是body或是父級元素。可通過z-index進行層次分級。
CSS中定位的層疊分級：z-index: auto | namber;
auto 遵從其父對象的定位
namber 無單位的整數值。可為負數
定位的原理：
可以位移的元素 （相對定位）
在本文流中，任何一個元素都被文本流所限制了自身的位置，但是通過CSS我們依然使得這些元素可以改變自己的位置，我們可以通過float來讓元素浮動，我們也可以通過margin來讓元素產生位置移動
如上所述：相對定位只可以在文本流中進行位置的上下左右的移動，同樣存在一定的局限性，雖然他的表現區脫離了文本流，但是在文本流卻依然為其保留了一席之地，這就好比一個打工的人他到了外地，但是在老家依然有一個專屬於他的位置，這個位置不應他的移動而改變。但是這樣很明顯就會空出一塊空白來，如果希望文本流拋棄這個部分就需要用到絕對定位，絕對定位不光脫離了文本流，而且在文本流中也不會給這個絕對定位元素留下專屬空位，這就好比是一個工廠裡的工人，如果有一個工人走了自然會要有別的工人來填充這個位置。而移動出去的部分自然也就成為了自由
絕對定位將可以通過TRBL來設置元素處在任何一個位置。在父層position屬性為默認值時，TRBL的坐標原點以body的坐標原點為起始。看下圖：
上圖可知，文本流中的內容會頂替絕對定位無素的位置，一點都不會客氣。而絕對定位元素自然的層疊於文本流之上。而在單一的絕對定位中，定位元素將會跑到網頁的左上角，因為那裡是他們的被絕對定位後的坐標原點。
被關聯的絕對定位
上面說的是單純的絕對定位，而在實際的應用中我們常常會需要用到一種特別的形式。即希望定位元素要有絕對定位的特性，但是又希望絕對定位的坐標原點可以固定在網頁中的某一個點，當這個點被移動時絕對位定元素希望能保證相對於這個原坐標的相對位置。也就是說需要這個絕對定位要跟著網頁移動，而並且是因定在網頁的某一個固定位置。通常當網頁是居中形式的時候這種效果就會顯得特別的重要。要實現這種效果基本方式就是為這個絕對定位的父級設置為相對定位。那麼絕對定位的坐標就會以父級為坐標起始點。
雖然是如此，但是這個坐標原點卻並不是父級的坐標原點，這是一個很奇怪的坐標位置。我們看一下模型圖示：
我們看到，這個圖中父級為黑灰色區塊，子級為青色區塊。父級是相對定位，子級是絕對定位。子級設置了頂部位移50個像素，左傾位移50個像素。那麼我們看，子級的坐標原點並不是從父級的坐標原點位移50個像素，而是從父級塊的padding左上邊緣點為坐標起始點。而父級這裡如果要產生位置移動，或是浏覽器窗口大小有所變動都不會影響到這個絕對定位元素與父級的相對定位元素之間的位置關系。這個子級也不用調整數值。
這是一種很特別並且也是非常實用的應用方式。如果你之前對於定位的控制並不自如的話，相信看完對這裡對定位的解釋一定可以把定位使用得隨心所欲。
總在視線裡的元素 （固定定位）
由於廣告的溢用，使得一些浏覽器軟件都開始有了廣告內容攔截，使得一些很好的效果現在都不推薦使用了。比如讓一個元素可能隨著網頁的滾動而不斷改變自己的位置。而現在我可以通過CSS中的一個定位屬性來實現這樣的一個效果，這個元素屬性就是曾經不被支持的position:fixed; 他的含義就是：固定定位。這個固定與絕對定位很像，唯一不同的是絕對定位是被固定在網頁中的某一個位置，而固定定位則是固定在浏覽器的視框位置。
定位應用
<!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" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta name="Design Corp" content="jonmax.com" />
<meta name="Designer mail" content="maozhenzhi(at)gmail.com" />
<meta name="roots" content="jonmax.com" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<title></title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" rev="stylesheet" type="text/css" media="print" href="jonStyle/css/print.css" />
<link rel="stylesheet" rev="stylesheet" type="text/css" media="screen, projection" href="jonStyle/css/master.css" />
<link rel="stylesheet" rev="stylesheet" type="text/css" media="screen, projection" href="jonStyle/css/master_color.css" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="/index.xml" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="/rsd.xml" />
<link rel="start" href="" title="Home" />
<style type="text/css">
/*<![CDATA[*/
body {margin:0; padding:0 10px 0 10px; border:0; height:100%; overflow:auto;}
#menu {right:0; top:0; width:130px; position:fixed; padding:10px; text-align:center; font-weight:bold; background:#000;}
* html #menu {position:absolute; right:16px;}/*only for ie*/
html {overflow:auto !important; overflow:hidden;}
/*]]>*/
</style>
</head>
<!-- -->
<body id="" class="">
<div id="menu">
<a href="#" title="Dummy menu item">Mozilla</a>
<a href="#" title="Dummy menu item">Opera</a>
<a href="#" title="Dummy menu item">Netscape</a>
<a href="#bites" title="Dummy menu item">Firefox</a>
<a href="#" title="Dummy menu item">IE6</a>
<a href="#" title="Dummy menu item">Windows</a>
<a href="#" title="Dummy menu item">Style</a>
<a href="#" title="Dummy menu item">CSS</a>
</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>
<div>看右上角的內容，不論浏覽器怎麼滾動，它始終在那個地方！</div>12下一頁
- 上一頁:CSS濾鏡技巧:顏色漸變
- 下一頁:CSS在表格邊框上的美學應用:修飾之美