codice:
<!doctype html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8">
  <title>amp-lightbox</title>
  
  <style amp-custom>
    .lightbox {
      background: rgba(0,0,0,0.8);
      width: 100%;
      height: 100%;
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
            z-index:3000;
    }
    .lightbox h1 {
      color: red;
    }
  </style>
  
  </head>
<body>
    
<center>


<div class="lightbox">
    
  
    <h1>Hello World 2!</h1>
  
</div>
 


</center>
    
    
<center>


    
</center></body></html>

Vorrei visualizzare lo sfondo opaco di questo codice amp di esempio sulle pagine desiderate ma il problema è che qualunque sezione scelga per posizionarlo... (HEADER, BEFORE CONTENT, AFTER CONTENT o FOOTER) mi va a sostituire completamente la precedente pagina target... mentre dovrebbe solo sovrapporsi ad essa a tutto schermo lasciandola intravedere sotto...

Grazie se qualcuno/a sa dirmi come fare per fare questa sovrapposizione anzichè avere la completa sostituzione della pagina.