曝光台 注意防骗
网曝天猫店富美金盛家居专营店坑蒙拐骗欺诈消费者
象，其匹配的规则带有一对d i s p l a y : t a b l e的属性/值。行由单元格填充，而单元格是由与元素
< T I T L E >、< C AT E G O RY >、< C O D E >、< R E L E A S E _ D AT E >和< P R I C E >相关的d i s p l a y : t a b l e - c e l l
属性/值生成的。
你可能注意到C S S模型与HTML 4.0模型十分相似。下面用H T M L生成相同的表格：
程序清单1 3 - 2 1
584使用XML 高级编程
下载
9. position属性
p o s i t i o n属性确定盒子的固定位置。只要p o s i t i o n属性值不为s t a t i c，元素的盒子就不随正常的
解释流移动。它的位置将相对固定在一个盒子载体中，其位置和上一个显示的盒子位置无关
─位置属性的优先级高于缺省块行为。
位置属性可以设定为一系列不同的值（参见表1 3 - 5）。
表1 3 - 5
值描述
s t a t i c 缺省行为；正常流
r e l a t i v e 根据正常流计算盒子的位置。它的位置相对于正常流的距离用l e f t、r i g h t、
t o p和b o t t o m属性来确定
a b s o l u t e 盒子的位置用l e f t、r i g h t、t o p和b o t t o m属性确定。用绝对值确定位置的
盒子位于正常流之外。盒子相对于载体块的位置放置
f i x e d 同a b s o l u t e的性质一样，只是盒子不能移动。例如，在一个屏幕中，当页
面滚动时，盒子所处的位置相对于观察点是不动的，在视觉浏览器中，这
个观察点就是浏览器窗口
值得注意的一点是绝对位置并不意味着载体块的文本要在用绝对值设定位置的对象周围分
布。下面的例子─s a m p l e _ p o s i t i o n . x m l将证明这一点：
程序清单1 3 - 2 2
第13章样式XML使用585 下载
这是与其相关联的样式表─s a m p l e _ p o s i t i o n . c s s：
程序清单1 3 - 2 3
上面的例子并不吸引人，但下面的图1 3 - 1 3将会清楚地显示C S S中绝对位置的含义。元素
< O V E R L A P >的数据内容用固定位置（相对于浏览器的上边界和左边界）显示。
图13-13
即使在文件s a m p l e _ p o s i t i o n . x m l中元素< T E X T >是位于元素< O V E R L A P >之前，元素
< O V E R L A P >的内容也在元素< T E X T >的数据内容上面显示。与缺省格式流无关，和元素
< O V E R L A P >相关联的盒子在绝对位置显示。在一个浏览器中，绝对位置相对于文件边界的上部
和左部设定。
如果我们使用的是相对位置属性，则元素< O V E R L A P >的数据内容的显示位置将相对于元素
< T E X T >的数据内容（用一个C S S规则转换为一个块对象）的下边界和左边界。这样， < T E X T >
的数据内容就不在< O V E R L A P >数据内容的中间显示，而是在< O V E R L A P >数据内容之后，用
l e f t和t o p属性确定相对距离。
在下面的程序中我们对前面的X M L文档样式表处理规则进行了改写，并将改后的程序叫做
586使用XML 高级编程
下载
s a m p l e _ p o s i t i o n 2 . x m l：
程序清单1 3 - 2 4
下面是与上述文档相关联的样式表─s a m p l e _ p o s i t i o n 2 . c s s：
程序清单1 3 - 2 5
它们的结果参见图1 3 - 1 4。
图13-14
第13章样式XML使用587 下载
图1 3 - 1 5显示了三种类型的位置。
图13-15
在第一张图（左边）中你可以看到，灰色区域是一个转换为格式对象的元素，位置设定为
绝对位置。因此，它的位置与文档起始位置的距离是绝对的。窗口（图中为画在上面的矩形）
只显示了元素的一部分，即包含在窗口（观察点）中的部分。因为文档在观察区域是滚动的，
所以显示内容也会随着内容滚动而变化。
在第二张图（中间）中，元素的位置固定，因此距离不是相对于文档的左边界和上边界设
定的，而是相对于观察窗口的左边界和上边界设定的。当我们滚动文档时，灰色区域总是在同
一个地方显示。
最后，最末一张图（右边）表明了灰色区域是处于一个相对位置，其位置相对于上一块区
域的左边界和下边界设定。
10. z顺序
元素不仅可以在一个二维空间中绝对定位，而且可以在三维空间中定位。相信在这里讨论
一下层是大有好处的。
想象一个带有几个透明层的传输文件。将你的想象力延伸，想象每个透明层上的盒子。第
三维就是透明层的叠加。z轴就是一种叠加的表现形式，盒子在其中可以互相层叠。每个盒子都
位于一个堆叠层里，每个盒子都有一个代表堆栈级别的整数（有可能是负数）；这个整数表明
它在同一堆栈中相对于其他盒子的位置。堆栈级别高的盒子放在级别低的盒子上面。例如，一
个堆栈级别为1 5的盒子比级别为2的盒子距离顶部更近一些。
层可以用来生成动画对象。脚本可以管理D O M和元素属性，因此要想生成一个带有移动对
象的动画文件是完全可能的。例如，一个X M L格式的幻灯片演示可以和一个C S S样式表一起传
送，其中的动画段落可以使演示更精彩。第三维或z的位置可以用属性z - i n d e x确定，如：
程序清单1 3 - 2 6
588使用XML 高级编程
下载
位置：绝对位置：固定位置：相对
如果没有指定的背景颜色，重叠的盒子是透明的。但如果对重叠的盒子指定颜色，则用属
性b a c k g r o u n d - c o l o r设定显示颜色。
11. float属性
另一个有趣的属性是f l o a t属性，它将盒子定位于载体块的左边或右边的某个相对位置上。当
元素用f l o a t属性设定时，它就贴在载体块的左边或右边。在下图中，两个元素被解释为移动盒
子。它们附着在块盒子上，并在相对于块盒子的位置上显示─而不是在包含文件的盒子中显
示。所以，不像属性/值为p o s i t i o n : a b s o l u t的元素，属性/值为f l o a t : r i g h t或f l o a t : l e f t的元素位于当
前载体盒子的某个相对位置上，如图1 3 - 1 6所示。
中国航空网 www.aero.cn
航空翻译 www.aviation.cn
本文链接地址：
XML高级编程下(28)
