Z-index가 안됩니다
본문
현재 캔버스와 아티클 배경, div 를 겹치게 두고 있습니다. 맨 밑부터 배경 캔버스 div 순으로 해서 글자가 맨 위에 오게 하려 하는데 z-index 속성도 적용되지 않습니다...
<article>
<canvas id="mainPage">main</canvas>
<div class="docs1">보아라! 이것이 CPU다!<br><br><br><br>
이것은 인텔 CPU!<br><br><br><br>
뜨겁기로 유명한 i9-12900k!<br><br><br><br>
보아라! 이것이 CPU다!<br><br><br><br>
이것은 인텔 CPU!<br><br><br><br>
뜨겁기로 유명한 i9-12900k!<br><br><br><br>
보아라! 이것이 CPU다!<br><br><br><br>
이것은 인텔 CPU!<br><br><br><br>
뜨겁기로 유명한 i9-12900k!<br><br><br><br>
</div>
<div class="docs2">보아라! 이것이 CPU다!<br><br><br><br>
이것은 인텔 CPU!<br><br><br><br>
뜨겁기로 유명한 i9-12900k!<br><br><br><br>
보아라! 이것이 CPU다!<br><br><br><br>
이것은 인텔 CPU!<br><br><br><br>
뜨겁기로 유명한 i9-12900k!<br><br><br><br>
보아라! 이것이 CPU다!<br><br><br><br>
이것은 인텔 CPU!<br><br><br><br>
뜨겁기로 유명한 i9-12900k!<br><br><br><br>
</div>
</article>
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;
}
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()
답변 1
올리신 소스에는 지정된 z-index 속성도 없고 position 속성도 없습니다.
추가
.docs1, .docs2 {
position: relative;
}
적용
<style>
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;
}
.docs1, .docs2 {
position: relative;
}
</style>
답변을 작성하시기 전에 로그인 해주세요.