Home >Web Front-end >HTML Tutorial >The effect of negative z-index attribute value_html/css_WEB-ITnose
The effect of negative z-index attribute value_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:41:102985browse
The effect of negative z-index attribute value:
In many CSS codes, you can see that the z-index attribute value is set to a negative number. In this case, let’s briefly introduce the performance when the value of this attribute is negative. Under normal circumstances, as long as the object has the position attribute set and the attribute value is not static, then this object can cover the non-positioned object. The code example is as follows:
<!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 in the above code The element can cover the b element. Let’s look at a code example:
<!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> The above code shows that the b element can cover the a element, which means that elements in the ordinary document flow can be covered. The position attribute is set, the attribute value is not static, and the z-index value is a negative number.
The original address is: http://www.51texiao.cn/div_cssjiaocheng/2015/0503/583.html
The most original address is: http://www.softwhy.com/