本主题介绍 VML，这是一项从 Windows Internet Explorer 9 开始弃用的功能。 依赖于 VML 的网页和应用程序应迁移到 SVG 或其他广泛支持的标准。
注意
截至 2011 年 12 月，本主题已存档。 因此，它不再主动维护。 有关详细信息，请参阅 存档内容。 有关 Windows Internet Explorer 当前版本的信息、建议和指南，请参阅 Internet Explorer 开发人员中心。
你已了解如何使用 VML 在网页上绘制形状和着色形状。 在本主题中，你将使用 VML 在网页上精确定位图形。
VML 使用 CSS2 的 Box Model 和 Visual Rendering Model 部分中定义的相同语法在网页上放置形状。 可以使用 静态、 相对或 绝对 来确定基点在网页上的位置。 然后，可以使用 顶部 和 左侧 样式属性来指定形状的包含框将定位的基点的偏移量。
还可以使用 z-index 指定网页上的形状的 z 顺序。
本主题内容：
static
默认位置样式是静态的，它指示浏览器将形状定位在当前点 (文本流中的基点) ，并忽略 顶部 和 左侧 样式属性中的设置。
例如，在以下 VML 表示形式中，红色椭圆紧跟在文本“形状的开头：”之后，如下图所示：
<body>
Beginning of the shape:
<v:oval style='width:80pt;height:90pt' fillcolor="red" />
End.
</body>
返回顶部relative
通过将位置样式属性设置为“相对”，可以将包含框与文本流中的当前点 (基点) 的偏移量放置。 偏移量由 顶部 和 左侧 样式属性中的设置决定。 请注意，定位为相对的包含框会占用文本流中的空间。
例如，在以下 VML 表示形式中，红色椭圆相对于文本流中的当前点，从左到左 20 磅，距顶部 10 磅，如下图所示：
<body>
Beginning of the shape:
<v:oval style='position:relative;left:20pt;top:10pt;width:80pt;
height:90pt;' fillcolor="red" />
End.
</body>
绝对
通过将位置样式属性设置为“绝对”，可以将包含框置于与左上角 (其父元素的基点) (包含形状) 的定位元素的精确距离。 请注意，定位为绝对的包含框不会占用文本流中的空间。
例如，在下面的 VML 表示形式中，红色椭圆包含在 <body> 元素中， (整个网页) ;因此，基点位于网页的左上角。 相对于网页左上角，椭圆的包含框正好位于左侧 20 磅和距顶部 10 磅的位置，如下图所示：
<body>
Beginning of the shape:
<v:oval style='position:relative;left:20pt;top:10pt
width:80pt; height:90pt;' fillcolor="red" />
End.
</body>
z 索引
可以定位与另一个形状重叠的形状。 通常，HTML 代码中最后列出的图形显示在顶部。
在 VML 中，可以使用 z 索引样式属性控制 z 顺序 。 此属性的值可以是零、正整数或负整数。 z 索引值较大的图形显示在 z 索引值较小的图形顶部。 当两个图形具有相同的 z 索引值时，HTML 代码中最后列出的图形将显示在顶部。
例如，在下面的 VML 表示形式中，红色椭圆显示在蓝色矩形的顶部。 这是因为红色椭圆的 z 索引值大于蓝色矩形的 z 索引值。
<v:oval
style='position:relative;left:10pt;top:20pt;width:100pt; height:80pt;z-index: 1'
fillcolor="red" />
<v:rect style='position:relative;left:10pt;top:45pt;width:100pt; height:80pt; z-index:0' fillcolor="blue" />
如果更改 z 索引（如以下 VML 表示形式所示），红色椭圆将移到蓝色矩形后面。
<v:oval
style='position:relative;left:10pt;top:20pt;width:100pt; height:80pt;z-index:0'
fillcolor="red" />
<v:rect style='position:relative;left:10pt;top:45pt;width:100pt; height:80pt;z-index:1'
fillcolor="blue" />
如果提供负整数，则可以使用 z 索引将图形放置在正常文本流后面，如以下 VML 表示形式所示。
<body>
Beginning of the shape:
<v:oval style='position:relative;left:20pt;top:10pt;z-index:-1;
width:80pt;height:90pt;' fillcolor="red" />
End.
</body>
rotation
可以使用 旋转 样式属性来指定希望形状在其轴上打开的度数。 正值表示顺时针旋转;负值指示逆时针旋转。
例如，如果指定 style='...rotation：90'，可以顺时针旋转形状 90 度。
flip
根据下表，可以使用 翻转 样式属性在其 x 轴或 y 轴上翻转形状：
| 值 | 说明 |
|---|---|
| x | 在 y 轴上翻转旋转的形状 (反转 x 纵坐标) |
| y | 在 x 轴上翻转旋转的形状 (反转 y 纵坐标) |
可以在 flip 属性中指定 x 和 y。
例如，如果键入 style='...flip：x y'，你将在其 x 轴和 y 轴上翻转形状。
总结
根据所学知识，可以按照以下步骤在网页上精确定位形状：
- 确定希望形状在网页上显示的位置以及形状的大小。
- 指定 style='position：relative (或 relative) ' 来确定基点。
- 使用 左侧 和 顶部 指定与基点的偏移量。
- 使用 宽度 和 高度 指定形状的包含框的大小。
- 使用 z-index 指定形状的 z 顺序。