DHTML CSS Positioning (CSS-P)
CSS 用于为 HTML 元素添加样式。
实例
注释：大多数 DHTML 实例需要IE 4.0+、Netscape 7+ 或者 Opera 7+！
如何相对于元素的正常位置来定位这个元素。
如何相对其正常位置来定位所有的标题。
如何使用一个绝对值来定义一个元素。
您可以在页面下方找到更多的例子。
哪些属性可与 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,style=1,startx=0, starty=0,finishx=140,finishy=270) |
| 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
背景不会随页面滚动。
更多实例
如何使某个元素不可见。你希望此元素显示还是不显示？
Z-index 可用于把一个元素放置于另一个元素之后，通过使用 Z-index 次序。
Z-index请看一下，元素的 Z-index 次序已经改变了。
Cursors通过 CSS 来改变鼠标指针的样式。
Filters使用 filter 属性来改变标题的样式。
filter 属性也可以应用于图像，这里有一些已应用了 filter 属性的图像例子。
当页面滚动时不会移动的背景图片。