实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{padding:0;margin: 0;} .shade{ position: absolute; width:1920px; height:1080px; background-color: black; opacity: 0.7; } .login{ width: 280px; height:360px; background-color: lightgoldenrodyellow; position: absolute; top:50%; left:50%; margin-top: -140px; margin-left: -180px; z-index: 99; } </style> </head> <body> <div class="shade"></div> <div class="login">登录窗口</div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
总结:
绝对定位属性(position: absolute;)能够使元素脱离文档流