z-index属性值为负数的作用
摘要:z-index属性值为负数的作用:在很多CSS代码中,可以看到z-index属性值被设置为负数的情况,下面就简单介绍一下,此属性值为负数情况下的表现。在一般情况下只要对象设置了position属性,且属性值不为static,那么此对象能够覆盖非定位对象,代码实例如下:蚂蚁部落 以上代码中a元素能够....
z-index属性值为负数的作用:
在很多CSS代码中,可以看到z-index属性值被设置为负数的情况,下面就简单介绍一下,此属性值为负数情况下的表现。在一般情况下只要对象设置了position属性,且属性值不为static,那么此对象能够覆盖非定位对象,代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title>蚂蚁部落</title> <style type="text/css"> div{ width:100px; height:100px; } .a{ position:relative; right:20px; top:20px; background-color:red; z-index:1; } .b{ background-color:green; } </style> </head> <body> <div class="a"></div> <div class="b"></div> </body> </html>
以上代码中a元素能够覆盖b元素,再看一段代码实例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title>蚂蚁部落</title> <style type="text/css"> div{ width:100px; height:100px; } .a{ position:relative; right:20px; top:20px; background-color:red; z-index:-1; } .b{ background-color:green; } </style> </head> <body> <div class="a"></div> <div class="b"></div> </body> </html>
以上代码可以看出b元素能够覆盖a元素,也就是说普通文档流中的元素能够覆盖设置了position属性,且属性值不为static,同时z-index值为负数的对象。
最为原始地址是:http://www.softwhy.com/
相关文章
最新发布
阅读排行
热门文章
猜你喜欢