CSS技巧:css的层叠顺序

作者: 来源: 更新时间:2013-03-04 11:43:03 点击:

<html> <head> <title>Z-Index</title> <style type = "text/css"> .one { background: green; position: absolute; padding: 10px; width: 500px; height: 300px; border: 2px solid black; z-index: 7; /*z-index设置为7*/ top: 40px; left: 60px; } .one-one { background: orange; position: absolute; width: 200px; height: 200px; border: 2px solid black; z-index: -10; /*z-index设置为-10*/ top: 50px; left: 60px; } .one-two { background: gray; position: absolute; width: 200px; height: 200px; border: 2px solid black; z-index: -20; /*z-index设置为-20*/ top: 70px; left: 30px; } .two { background: red; position: absolute; width: 600px; height: 300px; border: 2px solid black; z-index: 5; /*z-index设置为5*/ } </style> </head> <div class = "one">one <div class = "one-one"> one-one </div> <div class = "one-two"> one-two </div> </div> <div class = "two"> two </div> <body> </body></html>

运行结果:

从结果中可以看出,第一个div(绿色表示)位于第二个div(红色表示)上面,并且第一个div的第一个子元素(黄色表示)和第二个子元素(灰色表示)都位于第二个div的上面,尽管第二个div的z-index为正,而这两个子div的z-index为负。因为这两个子div的z-index是处于第一个div的z-index上下文中,相当于它们和第一个div共享了z-index = 7的值,而这个值比第二个div的z-index = 5大,所以他们位于上面。