The effect of negative z-index attribute value_html/css

The effect of negative z-index attribute value_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:41:10

Original

2947 people have browsed it

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>

Copy after login

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>

Copy after login

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/