CSS z-index:元素堆叠是什么,小小编为你讲解,此篇文章小白必看

通常,您可能认为HTML页面是二维平面。 因为页面中的文本、图像或其他元素在页面上按一定的顺序排列,每个元素之间有一定的间隙,不会重叠。 但是,实际的网页实际上是三维的,可能会在元素之间发生堆栈(重叠)。 可以使用CSS的z-index属性设置元素的堆叠顺序,如下图所示。

110131OI-0
图:元素堆叠演示

每个元素都有一个默认的z索引属性。将z-index属性与position属性结合使用,可以创建类似于PhotoShop中的图层效果。z-index属性可以设置元素的级联级别(当一个元素重叠时,它在其他元素之上或之下),级联级别较高的元素将在级联级别较低的元素之前(或之上)。
通过 z-index 属性您可以创建更加复杂的网页布局,z-index 属性的可选值如下表所示:

描述
auto 默认值,堆叠顺序与父元素相等
number 使用具体数值(整数)设置元素的堆叠顺序
inherit 从父元素继承 z-index 属性的值

关于元素的层级关系有以下几点需要注意:

  • 对于未设置 position 属性的元素或者 position 属性的值为 static 时,后定义的元素会覆盖前面的元素;
  • 对于设置有 position 属性且属性值不为 static 的元素,这些元素会覆盖没有设置 position 属性或者 position 属性值为 static 的元素;
  • 对于 position 属性值不为 static 且定义了 z-index 属性的元素,z-index 属性值大的元素会覆盖 z-index 属性值小的元素,即 z-index 属性值越大优先级越高,若 z-index 属性值相同,则后定义的元素会覆盖前面定义的元素;
  • z-index 属性仅在元素定义了 position 属性且属性值不为 static 时才有效。

【示例】下面通过具体代码来演示 z-index 属性的使用:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .box-x {
  6. width: 150px;
  7. height: 350px;
  8. border: 1px dashed red;
  9. background-color: rgba(255, 153, 153, 0.7);
  10. float: left;
  11. }
  12. .box-y {
  13. width: 300px;
  14. height: 120px;
  15. border: 1px dashed green;
  16. background-color: rgba(179, 255, 153, 0.7);
  17. }
  18. .one {
  19. position: absolute;
  20. top: 5px;
  21. left: 5px;
  22. z-index: 4;
  23. }
  24. .two {
  25. position: relative;
  26. top: 30px;
  27. left: 80px;
  28. z-index: 3;
  29. }
  30. .three {
  31. position: relative;
  32. top: -10px;
  33. left: 120px;
  34. z-index: 2;
  35. }
  36. .four {
  37. position: absolute;
  38. top: 5px;
  39. right: 5px;
  40. z-index: 1;
  41. }
  42. .five {
  43. margin-left: 100px;
  44. margin-top: -50px;
  45. background-color: rgba(255, 255, 153, 0.7);
  46. z-index: 5;
  47. }
  48. </style>
  49. </head>
  50. <body>
  51. <div class=“box-x one”>one</div>
  52. <div class=“box-y two”>two</div>
  53. <div class=“box-y three”>three</div>
  54. <div class=“box-x four”>four</div>
  55. <div class=“box-y five”>five</div>
  56. </body>
  57. </html>

运行结果如下图所示:

110131JB-1
图:z-index 属性演示
© 版权声明
THE END
喜欢就支持一下吧
点赞7 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片