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 像素的位置:

  1. div
  2. {
  3. position:relative;
  4. left:10;
  5. }
position:absolute

position:absolute 属性根据距离窗口的 margin 来定位一个元素。

下面的例子把这个 div 元素定位到距离其包含块左侧 margin 的右方 10 像素的位置:

  1. div
  2. {
  3. position:absolute;
  4. left:10;
  5. }

Visibility

visibility 属性可决定一个元素是否可见。

visibility:visible

visibility:visible 属性可使元素可见。

  1. h1
  2. {
  3. visibility:visible;
  4. }
visibility:hidden

visibility:hidden 属性可使元素不可见。

  1. h1
  2. {
  3. visibility:hidden;
  4. }

Z-index

z-index 属性用于把一个元素放置于另一个元素之后。z-index 的默认值是 0。值越高,其优先权也越高。z-index: -1 更低的优先权。

  1. h1
  2. {
  3. z-index:1;
  4. }
  5. h2
  6. {
  7. z-index:2;
  8. }

在上面的例子中,如果 h1 和 h2 彼此叠加,则 h2 元素会位于 h1 的上面。


Filters

filter 属性允许您向文本和图像添加更多的样式效果。

  1. h1
  2. {
  3. width:100%;
  4. filter:glow;
  5. }

注释:若需要使用 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);
chromacolor使指定的颜色透明filter:chroma(color=#ff0000)
fliphnone水平反转元素filter:fliph;
flipvnone垂直反转元素filter:flipv;
glow
  • color
  • strength
使元素发光filter:glow(color=#ff0000,strength=5);
graynone用黑白色来呈现元素filter:gray;
invertnone用反转的颜色和亮度值来呈现元素filter:invert;
maskcolor呈现带有指定背景色和透明前景色的元素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)
xraynone使用黑白色显示带有反转色和亮度值的元素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

当页面滚动时不会移动的背景图片。