DHTML CSS Positioning (CSS-P)

CSS 用于为 HTML 元素添加样式。

实例

注释：大多数 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	opacity finishopacity style startx starty finishx finishy	允许您设置元素的透明度	filter:alpha( opacity=20, finishopacity=100, style=1, startx=0, starty=0, finishx=140, finishy=270)
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;

Background

background 属性允许您选用自己的背景。

background-attachment:scroll

背景随页面滚动。

background-attachment:fixed

背景不会随页面滚动。