使用JavaScript操纵CSS

Question

我使用JavaScript书签遇到了动画问题。它在具有标头和页脚的某些网站上无法正常工作。我的动画div应该在所有其他内容上显示。但是它是这样的。这是我的代码，请提供解决方案。还应在移动设备的中心显示。

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 );

应该像此图像一样工作 ，但是像这样的图像