Next.js에서 next/image으로 배경 overlay시 z-index 설정에도 span 태그가 우선순위일때

SUNG JUN LEE·2022년 12월 15일
0

NextJS

목록 보기
1/1

NextJS 에서 next/image를 사용하여 컴포넌트내에 배경을 입히려고 할시 span 태그가 우선순위 조정이 안되서 내부 태그들이 선택이 되지 않는 문제가 있다.
13버전으로 업데이트 된 후 기존 문제되던 span 태그가 제거 되었다

const Special = () => {
    return (
        <section className={styles.container}>
            <div className={styles.inner}>
                <div className={styles.descriptionBox}>
                    <Header />
                    <Line />
                    <DescriptionWithButton />
                </div>
                <GridBox />
                <Commnet />
                <AuctionButton />
            </div>
            <Image
                className={styles.background}
                src={'/contents/blur_special_background.jpg'}
                alt={'special background image'}
                layout="fill"
                objectFit="cover"
                objectPosition="center"
                priority
            />
        </section>
    );
};

export default Special;

위 코드에서 container는 Next/image 의 layout props 때문에 relative 를 주어야 하고 내부 컴포넌트인 innerrelative 를 주면 우선순위가 해결된다.

profile
FE developer

0개의 댓글