Heim > Artikel > Web-Frontend > z-index属性值为负数的作用_html/css_WEB-ITnose
z-index属性值为负数的作用_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:41:102900Durchsuche
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.51texiao.cn/div_cssjiaocheng/2015/0503/583.html
最为原始地址是:http://www.softwhy.com/
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：letter-spacing与word-spacing的区别_html/css_WEB-ITnoseNächster Artikel：CSS3去除手机浏览器按钮点击出现的高亮框_html/css_WEB-ITnose