CSS 用于為 HTML 元素添加樣式。
DHTML CSS Positioning (CSS-P)
實例
注釋：大多數 DHTML 實例需要IE 4.0+、Netscape 7+ 或者 Opera 7+！
- position:relative
- 如何相對于元素的正常位置來定位這個元素。
- position:relative
- 如何相對其正常位置來定位所有的標題。
- position:absolute
- 如何使用一個絕對值來定義一個元素。
您可以在頁面下方找到更多的例子。
哪些屬性可與 CSS-P 一同使用？
首先，此元素必須指定 position 屬性（relative 或 absolute）。
然后，我就可以設置下列 CSS-P 屬性了：
- left - 元素的左側位置
- top - 元素的頂端位置
- visibility - 指定元素應當可見還是隱藏
- z-index - 元素的堆疊次序
- clip - 元素裁剪
- overflow - 如何處理溢出的內容
Position
CSS 的 position 屬性允許您控制文檔中某個元素的定位。
position:relative
position:relative 屬性可向對于一個元素的當前位置來定位此元素。
下面的例子把這個 div 元素定位到距離其正常位置右方 10 像素的位置：
div { position:relative; left:10; } position:absolute
position:absolute 屬性根據距離窗口的 margin 來定位一個元素。
下面的例子把這個 div 元素定位到距離其包含塊左側 margin 的右方 10 像素的位置：
div { position:absolute; left:10; } Visibility
visibility 屬性可決定一個元素是否可見。
visibility:visible
visibility:visible 屬性可使元素可見。
h1 { visibility:visible; } visibility:hidden
visibility:hidden 屬性可使元素不可見。
h1 { visibility:hidden; } Z-index
z-index 屬性用于把一個元素放置于另一個元素之后。z-index 的默認值是 0。值越高，其優先權也越高。z-index: -1 更低的優先權。
h1 { z-index:1; } h2 { z-index:2; } 在上面的例子中，如果 h1 和 h2 彼此疊加，則 h2 元素會位于 h1 的上面。
Filters
filter 屬性允許您向文本和圖像添加更多的樣式效果。
h1 { width:100%; filter:glow; } 注釋：若需要使用 filter 屬性，請始終指定元素的寬度。
上面的例子產生下面的輸出：
Header
不同的濾鏡
注釋：除非 background-color 屬性被設置為 transparent，否則某些 Filter 屬性將無法工作！
| 屬性 | 參數 | 描述 | 例子 |
|---|---|---|---|
| alpha |
| 允許您設置元素的透明度 | filter:alpha( opacity=20, finishopacity=100, > |
| blur |
| 使元素模糊 | filter:blur( add=true, direction=90, strength=6); |
| chroma | color | 使指定的顏色透明 | filter:chroma( color=#ff0000) |
| fliph | none | 水平反轉元素 | filter:fliph; |
| flipv | none | 垂直反轉元素 | filter:flipv; |
| glow |
| 使元素發光 | filter:glow( color=#ff0000, strength=5); |
| gray | none | 用黑白色來呈現元素 | filter:gray; |
| invert | none | 用反轉的顏色和亮度值來呈現元素 | filter:invert; |
| mask | color | 呈現帶有指定背景色和透明前景色的元素 | filter:mask( color=#ff0000); |
| shadow |
| 呈現帶有陰影的元素 | filter:shadow (color=#ff0000, direction=90); |
| dropshadow |
| 呈現帶有陰影的元素 | filter:dropshadow (color=#ff0000, offx=5, offy=5, positive=true); |
| wave |
| 把元素呈現為波浪狀 | filter:wave( add=true, freq=1, lightstrength=3, phase=0, strength=5) |
| xray | none | 使用黑白色顯示帶有反轉色和亮度值的元素 | filter:xray; |
Background
background 屬性允許您選用自己的背景。
background-attachment:scroll
背景隨頁面滾動。
background-attachment:fixed
背景不會隨頁面滾動。
更多實例
- Visibility
- 如何使某個元素不可見。你希望此元素顯示還是不顯示？
- Z-index
- Z-index 可用于把一個元素放置于另一個元素之后，通過使用 Z-index 次序。
- Z-index
- 請看一下，元素的 Z-index 次序已經改變了。
- Cursors
- 通過 CSS 來改變鼠標指針的樣式。
- Filters
- 使用 filter 屬性來改變標題的樣式。
- Filters on Images
- filter 屬性也可以應用于圖像，這里有一些已應用了 filter 屬性的圖像例子。
- Watermark
- 當頁面滾動時不會移動的背景圖片。
