z-index属性値が負の役割
11641 ワード
z-index属性値が負数の役割:
多くのCSSコードでは、z-index属性値が負数に設定されている場合が見られますが、この属性値が負数の場合の表現について簡単に説明します.一般に、オブジェクトがpositionプロパティを設定し、プロパティ値がstaticでない場合、このオブジェクトは非位置決めオブジェクトを上書きできます.コードの例は次のとおりです.
以上のコードのa要素はb要素を上書きすることができ、コードの例を見てください.
以上のコードから、b要素はa要素を上書きできることがわかります.すなわち、通常のドキュメントストリームの要素はposition属性が設定され、属性値がstaticではなく、z-index値が負のオブジェクトを上書きできることがわかります.
原文の住所は次のとおりです.http://www.51texiao.cn/div_cssjiaocheng/2015/0503/583.html
最も元のアドレスは次のとおりです.http://www.softwhy.com/
多くの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/