DHTML CSS Positioning (CSS-P)

CSS 用于為 HTML 元素添加樣式。

目錄: 1、實例; 2、哪些屬性可與 CSS-P 一同使用？; 3、Position; 4、position:relative; 5、position:absolute; 6、Visibility; 7、visibility:visible; 、visibility:hidden

實例

注釋：大多數 DHTML 實例需要IE 4.0+、Netscape 7+ 或者 Opera 7+！

您可以在頁面下方找到更多的例子。

首先，此元素必須指定 position 屬性（relative 或 absolute）。

然后，我就可以設置下列 CSS-P 屬性了：

CSS 的 position 屬性允許您控制文檔中某個元素的定位。

position:relative 屬性可向對于一個元素的當前位置來定位此元素。

下面的例子把這個 div 元素定位到距離其正常位置右方 10 像素的位置：

div { position:relative; left:10; }

position:absolute 屬性根據距離窗口的 margin 來定位一個元素。

下面的例子把這個 div 元素定位到距離其包含塊左側 margin 的右方 10 像素的位置：

div { position:absolute; left:10; }

visibility 屬性可決定一個元素是否可見。

visibility:visible 屬性可使元素可見。

h1 { visibility:visible; }

visibility:hidden 屬性可使元素不可見。

h1 { visibility:hidden; }

z-index 屬性用于把一個元素放置于另一個元素之后。z-index 的默認值是 0。值越高，其優先權也越高。z-index: -1 更低的優先權。

h1 { z-index:1; } h2 { z-index:2; }

在上面的例子中，如果 h1 和 h2 彼此疊加，則 h2 元素會位于 h1 的上面。

filter 屬性允許您向文本和圖像添加更多的樣式效果。

h1 { width:100%; filter:glow; }

注釋：若需要使用 filter 屬性，請始終指定元素的寬度。

上面的例子產生下面的輸出：

Header

注釋：除非 background-color 屬性被設置為 transparent，否則某些 Filter 屬性將無法工作！

屬性	參數	描述	例子
alpha	opacity finishopacity style startx starty finishx finishy	允許您設置元素的透明度	filter:alpha( opacity=20, finishopacity=100, >
blur	add direction strength	使元素模糊	filter:blur( add=true, direction=90, strength=6);
chroma	color	使指定的顏色透明	filter:chroma( color=#ff0000)
fliph	none	水平反轉元素	filter:fliph;
flipv	none	垂直反轉元素	filter:flipv;
glow	color strength	使元素發光	filter:glow( color=#ff0000, strength=5);
gray	none	用黑白色來呈現元素	filter:gray;
invert	none	用反轉的顏色和亮度值來呈現元素	filter:invert;
mask	color	呈現帶有指定背景色和透明前景色的元素	filter:mask( color=#ff0000);
shadow	color direction	呈現帶有陰影的元素	filter:shadow (color=#ff0000, direction=90);
dropshadow	color offx offy positive	呈現帶有陰影的元素	filter:dropshadow (color=#ff0000, offx=5, offy=5, positive=true);
wave	add freq lightstrength phase strength	把元素呈現為波浪狀	filter:wave( add=true, freq=1, lightstrength=3, phase=0, strength=5)
xray	none	使用黑白色顯示帶有反轉色和亮度值的元素	filter:xray;