<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>position fixed 测试</title> </head> <body> <div class="parent bg"> parent box <div class="fixed-box"> width: 100%;<br/> height: 100%;<br/> background-color: red;<br/> opacity: 0.4;<br/> position: fixed;<br/> left: 20px;<br/> top: 50px;<br/> </div> </div> </body> <style> *{ padding:0; margin: 0; } body{ width: 100%; height: 100vh; background-color: #ebe9cc; display: flex; justify-content: center; align-items: center; } .bg{ background-color: rgba(89, 89, 89, 0.1); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: rgba(14, 14, 14, 0.19) 0px 6px 15px 0px; -webkit-box-shadow: rgba(14, 14, 14, 0.19) 0px 6px 15px 0px; border-radius: 4px; -webkit-border-radius: 4px; /*color: rgba(128, 128, 128, 0.4);*/ } .parent{ width: 80%; height: 80%; border: 1px solid black; } .fixed-box{ width: 100%; height: 100%; background-color: red; opacity: 0.4; position: fixed; left: 20px; top: 50px; } </style> </html>