html的z-index
阿新 • • 發佈：2021-08-29
vscode編輯
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>Document</title>
<style>
.shadow{
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
background-color:rgba(0,0,0,0.5);
z-index:80;
}
.mode{
position:fixed;
height:400px;
width:400px;
background-color:white;
z-index:100;/*數值越大，越在上層顯示*/
left:50%;/*按照視窗寬度的50%來移動*/
top:50%;/*按照視窗高度的50%來移動*/
margin-top:-200px;
margin-left:-200px;/*正的相當於距離左邊200px，負號相當於右邊了*/
}
</style>
</head>
<body>
<div>
<h1>
我在測試
</h1>
</div>
<divclass="mode"></div>
<divclass="shadow"></div>
</body>
</html>