html教程_动态HTML教程（二）_HTML教程(2)_H5之家 - 中国HTML5教程资源分享第一站

这两个句子中，单词Webmonkey都定位在距左边200像素的位置。第1个句
子用的是绝对定位，第2个用的是相对定位。注意相对定位的句子中空出了
相当于单词Webmonkey长度的空间，而绝对定位了的句子中没有这个空间，
如果我给两个句子都加一个"top"参数值，则你会看到绝对定位了的句子将
飘在文章的顶部，而相对定位的句子则就在它所在的句子的位置之下：

Tim, the hero. Webmonkey editor and resident banjo-picker.

现在我们已经了解了两种定位的不同。我们作一个小练习。我们用CSS-P
作一个网页。试着做网页，然后我们将制作更复杂的布局（提示：你可以用
这个屏幕快照中的图象作为网页背景图象来帮助你定位。注意将字体采用
Comic Sans MS）。

你可以注意到上面的那个布局用表格就能很轻易地做到。但是串接样式表
比表格有一项独特的优势：分层。

你肯定注意到你无法用表格将几幅图片或文字叠放在一起。一般情况下，
如果人们希望实现这种效果只有制作一幅位图，在图片中制作出文字或图
象叠放在一起的效果，然后将图片放在网页中。

而利用动态HTML，则可以利用分层顺序将叠放显示各个对象，例：

Here is Aaron in front of a desk.

Here is Aaron behind a desk.

在这个例子中，Aaron在他的桌子后面，Aaron的图片首先出现在源代码中：

<div id="aaron">
<img src="http：//www.webmonkey.com.cn/
dynamic_html/tutor/aaron.gif">
</div>
<div id="desk">
<img src="http：//www.webmonkey.com.cn/
dynamic_html/tutor/extraDesk.gif">
</div>
但是如果我们想让Aaron站在桌子前面，我们可以这样写HTML代码：

    <div id="desk">
   <img src="http：//www.webmonkey.com.cn/
dynamic_html/tutor/extraDesk.gif">
</div>
<div id="aaron">
   <img src="http：//www.webmonkey.com.cn/
dynamic_html/tutor/aaron.gif">
</div>
这种类型的分层在HTML暗示编写。所以搭建动态HTML网页的方法之一就
是将各个对象按照显示的前后层次顺序排列排在显示底层的对象最先列出，
而排在显示最上层的对象在源代码顺序的最后列出。但是这种方式不一定
不出问题。很多时候象在源代码中的顺序和它最后的显示顺序必须没有任
何关系。而此时就需要用到z-index CSS属性。

这里是重新制作后的例子。这次的HTML标识和一起一样，但是对象采用
了明示的z-index。

Aaron has a z-index of 2. The desk has a z-index of 1.

Aaron and the desk have an implied z-index.

两个例子的HTML都是相同的，但CSS不同。

z-index可以是一个正值或一个负值（带负值的元素将位于母体元素的下面）
，它所造成的显示效果为：如果一个对象的z-index比另一个元素大，则
z-index为1时的视觉效果和Z-index为2时的视觉效果的区别相当于1和1000Z
之间的区别。

这些定位的基本知识是你搭建跨平台动态HTML的第1步。明天我们将学习到
动态HTML的精华之处以及目前所受的局限。

明天我们将陶醉在JavaScript的神奇魅力中。

进入HTML视频教程专区