Web頁面中的特殊效果，如菜單效果，對話框效果都需要通過定位屬性來實現。

定位樣式

position屬性可以控制元素的定位類型

position屬性值可以為sataic、fixed、absolute、relative

position屬性的語法結構

- position:value;

定位屬性static

默認值。沒有定位，元素出現在正常文檔流中

#box{position:static;width:100px;height:100px;border:2px?solid?#f00;
}

定位屬性fixed

生成固定定位的元素，相對于瀏覽器窗口進行定位。

元素的位置通過位置偏移屬性進行設置。

元素的Z軸疊放順序通過z-index屬性進行設置。

元素從正常文檔流中完全移除，不占用頁面空間

當用戶向下滾動頁面時元素框并不隨著移動

#topNav{position:fixed;width:100%;left:0;top:0;right:0;background-color:#000;
}

定位屬性absolute

生成絕對定位元素，相對于static定位以外的第一個父元素進行定位

元素的位置通過位置便宜屬性進行規定

元素的Z軸疊放順序通過z-index屬性進行設置

將元素的正常文檔流中完全移除，不占據空間

#mask{position:absolute;width:100%;height:100%;left:0;top:0;right:0;bottom:0;background-color:#000;
}

定位屬性relative

生成相對定位元素，相對于其正常位置進行定位

元素的位置通過位置便宜屬性進行設置

元素的Z軸疊放順序通過z-index屬性進行設置

元素原本所占的空間仍保留

元素框會相對與它原來的位置偏移某個距離

-設置垂直或水平位置，讓元素相對于它的起點進行移動

位置偏移

left屬性設置對象相對于父元素/窗口的左側偏移距離

right屬性設置對象相對于父元素/窗口的右側偏移距離

top屬性設置對象相對于父元素/窗口的頂部偏移距離

bottom屬性設置對象相對于父元素/窗口的底部偏移距離

Z軸疊放順序

HTML元素的Z軸地方順序可以通過z-index屬性實現

Z軸的數值越打、其位置靠上，反之靠下

透明處理

通過CSS樣式可以設置HTML元素的透明度

在chrome、firefox等瀏覽器中采用opacity屬性實現

在IE瀏覽器中采用filter屬性實現

#mask{position:absolute;width:100%;height:100%;left:0;top:0;right:0;bottom:0;background-color:#000;opacity:?.3;filter:?alpha(opacity=30);
}

CSS Hacks

為了解決不同瀏覽器之間CSS支持的不同

瀏覽器的類型及版本的不同會造成CSS效果的不盡相同

CSS Hack區分IE6、IE7、firefox

區別不同瀏覽器，CSS Hack寫法

區別IE6與Firefox

background:orange;*background:blue;

區別IE6與IE7

background:green!impartant;background:blue;

區別IE7與Firefox

background:orange;*background:green;

區別FF、IE6、IE7

background:orange;
*background:green;
_background:blue;
background:orange;
*background:green!important;
*background:blue;

CSS優化

減輕服務器壓力

縮短服務器響應時間

提高用戶的體驗度

CSS優化原則

盡量減少HTTP請求個數

80%的最終用戶響應時間花在前端程序上，而其大部分時間則花在各種頁面元素，如圖像、樣式表、腳本和Flash等的下載。減少頁面元素將會減少HTPP請求的次數。這是快速顯示頁面的關鍵所在。常用的方法包括：

- CSS sprites，合并多個背景圖像到一個單獨圖像，然后通過background-p_w_picpath和background-position進行調整

- p_w_picpath maps，結合堆個圖像到一個單獨圖像。其總體規模大致是想當的，但是減少HTTP請求的數量，從而加快頁面顯示的速度。圖像銀蛇只工作在頁面中的圖像是連續的，如導航欄

把CSS放到頂部

將CSS樣式表放置在文檔頭部后，可以提高頁面加載速度。

這是因為樣式表放在頭部后允許頁面逐步顯示

避免使用CSS表達式

CSS表達式是一個強大（也是危險）的方式來動態設置CSS屬性。他們從IE5開始支持，但IE8正式終止了對這種功能的支持。使用CSS表達式的問題在于，計算機會計算高于預期的頻率。如果在CSS中要使用表達式的話，則可以通過：

- 使用一次性表達式，在第一次計算表達式設置為一個顯示的值，取代CSS表達式

- 如果樣式屬性必須設置動態頁面的整個生命周期中，使用事件處理程序來替代CSS表達式

避免空的src和href

當link標記的href屬性為空、script標記的src屬性為空的時候，瀏覽器渲染的時候會把當前頁面的URL作為它們的屬性值，從而把頁面的內容加載進來作為它們的值

將CSS和JS放到外部文件中

通常在現實世界中使用外部文件產生更快的速度，因為JavaScript和CSS文件將由瀏覽器緩存

這樣的技術在頁面內引用外部的JavaScript和CSS文件后續頁會引用外部文件應該已經在瀏覽器中緩存

壓縮CSS或JavaScript

壓縮的做法是把不必要的字符從代碼來減小其大小，從而提高加載時間

兩個流行的工具：JSMin和YUI Compressor，其中YUI Compressor也可以壓縮CSS

不要再HTML中縮放圖像

因為盡管通過HTML標記的width、height屬性縮放了圖像，但是圖像在網絡傳輸時仍然保持原來圖像的字節數