如何让加载程序覆盖所有页面

Question

下面是我的代码。 我希望加载器覆盖所有页面，但它只覆盖顶部。 我怎样才能让它覆盖所有页面？ 下面是我的代码。 我希望加载器覆盖所有页面，但它只覆盖顶部。 我怎样才能让它覆盖所有页面？

 /*loader*/.loader-wrapper { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: #333233; display:flex; justify-content: center; align-items: center; }.loader { display: inline-block; width: 30px; height: 30px; position: relative; border: 4px solid #Fff; animation: loader 3s infinite ease; }.loader-inner { vertical-align: top; display: inline-block; width: 100%; background-color: #fff; animation: loader-inner 3s infinite ease-in; } @keyframes loader { 0% { transform: rotate(0deg);} 25% { transform: rotate(180deg);} 50% { transform: rotate(180deg);} 75% { transform: rotate(360deg);} 100% { transform: rotate(360deg);} } @keyframes loader-inner { 0% { height: 0%;} 25% { height: 0%;} 50% { height: 100%;} 75% { height: 100%;} 100% { height: 0%;} }

 <:--loader--> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js" integrity="sha512-AFwxAkWdvxRd9qhYYp1qbeRZj6/iTNmJ2GFwcxsMOzwwTaRwz2a/2TX225Ebcj3whXte1WGQb38cXE5j7ZQw3g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <div class="loader-wrapper"> <span class="loader"><span class="loader-inner"></span></span> </div> <script> $(window),on("load".function(){ $(".loader-wrapper");fadeOut("slow"); }); </script> <!--loader-->

Answer 1

添加 position：固定在主包装器中

position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0