DHTML CSS Positioning (CSS-P)

w3school 在线教程

## DHTML 教程

- DHTML 教程
- DHTML 简介
- DHTML CSS
- DHTML DOM
- DHTML 事件
- DHTML 总结

## DHTML DOM

- DOM 参考手册

## DHTML 实例

- DHTML 实例
- DOM 实例

## 建站手册

- 网站构建
- 万维网联盟 (W3C)
- 浏览器信息
- 网站品质
- 语义网
- 职业规划
- 网站主机

## 关于 W3School

## 帮助 W3School

## 广告刊例

# DHTML CSS Positioning (CSS-P)

- DHTML 简介
- DHTML DOM

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

背景不会随页面滚动。

## 更多实例

Visibility
  如何使某个元素不可见。你希望此元素显示还是不显示？
Z-index
  Z-index 可用于把一个元素放置于另一个元素之后，通过使用 Z-index 次序。
Z-index
  请看一下，元素的 Z-index 次序已经改变了。
Cursors
  通过 CSS 来改变鼠标指针的样式。
Filters
  使用 filter 属性来改变标题的样式。
Filters on Images
  filter 属性也可以应用于图像，这里有一些已应用了 filter 属性的图像例子。
Watermark
  当页面滚动时不会移动的背景图片。

- DHTML 简介
- DHTML DOM