这是我的html代码：
<html lang="fr">
<head>
<link rel="stylesheet" type="text/css" href="./index.css">
</head>
<body>
<div id="main">
<div id="overlay"></div>
<popup></popup>
</div>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript" src="./vue-resource.min.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
和css代码：
#overlay {
position: fixed;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2;
cursor: pointer;
}
#popup {
position: fixed;
left: 33%;
right: 33%;
width: 30%;
height: auto;
padding: 1%;
}
添加z-index以指定堆栈顺序。
#overlay {
position: fixed;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2;
cursor: pointer;
}
#popup {
position: fixed;
left: 33%;
right: 33%;
width: 30%;
height: auto;
padding: 1%;
z-index: 3;
}
