HTML学习分层技术

From upnb游本网--笔记本电脑知识库（笔记本wiki)--您身边的电脑词典

串接样式表比表格有一项独特的优势：分层。

• 你肯定注意到你无法用表格将几幅图片或文字叠放在一起。一般情况下，如果人们希望实现这种效果只有制作一幅位图，在图片中制作出文字或图象叠放在一起的效果，然后将图片放在网页中。
• 而利用动态HTML，则可以利用分层顺序将叠放显示各个对象，例：
  • 在这个例子中，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属性。

<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之间的区别。