你可以注意到上面的那个布局用表格就能很轻易地做到。但
是串接样式表比表格有一项独特的优势:分层。
你肯定注意到你无法用表格将几幅图片或文字叠放在一起。
一般情况下,如果人们希望实现这种效果只有制作一幅位
图,在图片中制作出文字或图象叠放在一起的效果,然后将
图片放在网页中。
而利用动态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代码:
这种类型的分层在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不同。
<style type="text/css"> #aaron {position:absolute; left: 8px; top: 31px; width: 79px; height: 73px; z-index: 2 } </style>
z-index可以是一个正值或一个负值(带负值的元素将
位于母体元素的下面) ,它所造成的显示效果为:如
果一个对象的z-index比另一个元素大,则z-index为1
时的视觉效果和Z-index为2时的视觉效果的区别相当于
1和1000Z之间的区别。
动态HTML教程
第二页 深入
第三页 相对和绝对定位
第四页 学习分层技术
第五页 家庭作业
Copyright © 1994-99 Wired Digital Inc. All rights reserved.