css-position&z-index显示问题
css-position&z-index显示问题
example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
#mask {
color: #fff;
text-align: center;
position: fixed;
top: 0;
left: 0;
z-index: 10002;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .6);
}
#target {
/* position: fixed; */
position: relative;
/* position: absolute; */
/* position: static; */
z-index: 1;
top: 50px;
}
#target span,
#target1 span {
background-color: yellow;
position: relative;
z-index: 10004;
}
</style>
<body>
<div id="target"><span>target position !static;show target z-index: 10004;</span></div>
<div id="target1"><span>show target1 z-index: 10004;</span></div>
<div id="mask" onclick="console.log(this.style.display='none')">
z-index:10002
</div>
</body>
</html>
Lee2
