i am running into a problem with animation using javascript bookmarklet. it is not working properly on some website which have header and footer. my animation div should display over all other content. but it is working like this. here is my code please give solution. also it should display in center on mobile device.

meta = document.createElement('meta');
meta.name="viewport";
meta.content = "width=device-width, initial-scale=1.8";
document.head.appendChild(meta);
cont= document.createElement('div');
cont.setAttribute("class","container");
cont.style.width= "100%";
cont.style.height= "100vh"; 
cont.style.background= "black";
cont.style.display= "flex";
cont.style.alignitems= "center";
cont.style.justifycontent= "center";
cont.style.position= "absolute";
cont.style.top= "50%";
cont.style.left= "50%";
cont.style.transform= "translate(-50%, -50%)";
document.body.appendChild(cont);

dd = document.createElement("div");
dd.setAttribute("id","np");          
dd.style.border= "16px solid #f3f3f3";
dd.style.borderRadius= "50%";
dd.style.borderTop= "16px solid blue";
dd.style.borderRight= "16px solid green";
dd.style.borderBottom= "16px solid red";
dd.style.borderLeft = "16px solid pink";
dd.style.width= "150px";
dd.style.height= "150px";
dd.style.position= "fixed";

dd.style.bottom= "50%";        
dd.style.right= "40%";        
dd.style.left= "40%";        
dd.style.top= "40%";

document.getElementsByClassName('container')[0].appendChild(dd);
const divElem = document.getElementById('np');
let rotate360 = [
      { transform: 'rotate(360deg)' }
    ];

    let slowInfinite = {
      duration: 1000,
      iterations: Infinity
    };

divElem.animate( rotate360, slowInfinite );

should work like this image but working like this image