如题，现需要给modal元素增加一个全局遮罩或全局背景，要求不能修改DOM结构和修改JS代码：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>CSS</title>
<style>
.modal {
position: fixed;
display: flex;
align-items: center;
justify-content: center;
top: 50%;
left: 50%;
color:#fff;
transform: translate(-50%,-50%);
width: 320px;
height: 240px;
z-index: 1;
background: red;
}
</style>
</head>
<body>
<div>某些元素</div>
<div class="modal">已存在的元素</div>
</body>
</html>
可以考虑通过:before伪元素增加全局背景:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>CSS</title>
<style>
.modal {
position: fixed;
display: flex;
align-items: center;
justify-content: center;
top:20%;
left: 0;
right: 0;
margin: 0 auto;
width: 320px;
height: 240px;
z-index: 1;
background: red;
}
.modal:before{
content:"";
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
z-index:-1;
background: rgba(0,0,0,.5);
}
</style>
</head>
<body>
<div>某些元素</div>
<div class="modal">已存在的元素</div>
</body>
</html>
此时自身元素也被挡住了，显然不符合需求：
四处碰壁以及参考层叠上下文后得:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>CSS</title>
<style>
.modal {
position: fixed;
display: flex;
align-items: center;
justify-content: center;
top:20%;
left: 0;
right: 0;
margin: 0 auto;
width: 320px;
height: 240px;
z-index: 1;
background: red;
}
.modal:before{
content:"";
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
z-index:-2;
background: rgba(0,0,0,.5);
}
.modal:after{
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
background: red;
}
</style>
</head>
<body>
<div>某些元素</div>
<div class="modal">已存在的元素</div>
</body>
</html>
最终呈现效果:
参考：http://www.w3.org/TR/CSS21/visuren.html#stack-level