曲径通幽论坛

标题: 用 z-index 设置元素的堆叠顺序 [打印本页]
作者: beyes    时间: 2015-12-22 23:03
标题: 用 z-index 设置元素的堆叠顺序
CSS 的元素是可以堆叠的，比如像下面这个效果：
[attach]4245[/attach]

改一下代码，又能上绿块堆在黄块上头：
[attach]4246[/attach]

像叠罗汉一样，决定是我压你，还是你压我，看 z-index 的属性值，值大的，在上头；反之在下头。需要注意的是，z-index 只能在定位元素（position）上有效。

这里说明一下为什么叫 z-index 。一般情况下，屏幕的二维平面用 X 轴和 Y 轴来衡量，但是显示立体堆叠的效果时，又得引用一个 Z 轴来表示。Z 轴定义为垂直延伸到显示区的轴。正数时，离用户近；负数时，离用户远。

对于上面的第 1 个图，代码表示如下：
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2.   <html>
  3.   <head>
  4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.   <title>Position</title>

  7.   <style>
  8.         .groad { background-color:#97D0F9 }
  9.         .groad span {font-size:22px; color:#fff }
  10.         
  11.         .forum { background-color:#A8F3BC; height:80px; position:absolute; top:100px; z-index:1 }
  12.         
  13.         .css { background-color:#F3F8C1; height:100px; width:300px; position:absolute; z-index:2}
  14.         .css span { color:blue; position:relative; top:30px; left:50px; }
  15. </style>
  16.      </head>

  18. <body>

  20. <div class="groad">[url]www.groad.net[/url] <span>技术论坛</span></div>
  21. <div class="css"><span>曲径通幽 CSS 版块</span></div>

  23. <div class="forum">曲径通幽</div>



  27. </body>
  28. </html>
复制代码

对于第 2 个图，只要将 forum 里的 z-index:1 改为 z-index:3 就能看到效果。




欢迎光临 曲径通幽论坛 (http://www.groad.net/bbs/) Powered by Discuz! X3.2