Z-index가 안됩니다

</p>

<pre>
<article>
    <canvas id="mainPage">main</canvas>
    <div class="docs1">보아라! 이것이 CPU다!




    이것은 인텔 CPU!




    뜨겁기로 유명한 i9-12900k!




        보아라! 이것이 CPU다!




    이것은 인텔 CPU!




    뜨겁기로 유명한 i9-12900k!




        보아라! 이것이 CPU다!




    이것은 인텔 CPU!




    뜨겁기로 유명한 i9-12900k!




    </div>
    <div class="docs2">보아라! 이것이 CPU다!




    이것은 인텔 CPU!




    뜨겁기로 유명한 i9-12900k!




        보아라! 이것이 CPU다!




    이것은 인텔 CPU!




    뜨겁기로 유명한 i9-12900k!




        보아라! 이것이 CPU다!




    이것은 인텔 CPU!




    뜨겁기로 유명한 i9-12900k!




    </div>
</article></pre>

<p>

</p>

<pre>
article {
   width: 100%;/* height:80%;*/
  text-align: left;
  position: relative;
  background-color: black;
}

#mainPage {
  position: fixed;
  left: 40%;
  top: 30%;
}

.docs1 {
  font-size: 80px;
  color: #FFFFFF;
}</pre>

<p>

</p>

<pre>
const html = document.documentElement;
const canvas = document.getElementById("mainPage");
const context = canvas.getContext("2d");
const frameCount = 101;
const currentFrame = index => (
  `img/cpu/${index.toString().padStart(3, '0')}.png`
)

const preloadImages = () => {
  for (let i = 1; i < frameCount; i++) {
    const img = new Image();
    img.src = currentFrame(i);
  }
};

const img = new Image()
img.src = currentFrame(1);
canvas.width=900;
canvas.height=1000;
img.onload=function(){
  context.drawImage(img, 0, 0, 540, 600);
}

const updateImage = index => {
  img.src = currentFrame(index);
  context.drawImage(img, 0, 0, 540, 600);
}

window.addEventListener('scroll', () => {
  const scrollTop = html.scrollTop;
  const maxScrollTop = /*html.scrollHeight - window.innerHeight*/3000;
  const scrollFraction = scrollTop / maxScrollTop;
  const frameIndex = Math.min(
    frameCount - 1,
    Math.ceil(scrollFraction * frameCount)
  );
  requestAnimationFrame(() => updateImage(frameIndex + 1))
  if (document.documentElement.scrollTop>3000){
    canvas.style.position = "absolute";
  }
  else {
    canvas.style.position = "fixed";
  }
});

preloadImages()</pre>

<p>