fix(tarot): 히어로 영상이 정적 poster img에 가려지는 z-index 충돌 해결
video와 poster img가 같은 z-index:0 + position:absolute였고 DOM 순서상 poster가 늦게 와서 video를 영원히 덮음 → 영상 재생 중이지만 안 보임. z-index 계층 명시: poster=0 (fallback) → video=1 → overlay=2 → content=3. video display:none 처리되면 뒤의 poster img가 자동 노출되도록 stacking 정리. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -22,15 +22,6 @@
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tarot__hero-video {
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tarot__hero-poster {
|
.tarot__hero-poster {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
@@ -40,16 +31,25 @@
|
|||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tarot__hero-video {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
.tarot__hero-overlay {
|
.tarot__hero-overlay {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
background: linear-gradient(180deg, rgba(15,4,40,.5), rgba(15,4,40,.85));
|
background: linear-gradient(180deg, rgba(15,4,40,.5), rgba(15,4,40,.85));
|
||||||
z-index: 1;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tarot__hero-content {
|
.tarot__hero-content {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 2;
|
z-index: 3;
|
||||||
padding: 60px 40px 80px;
|
padding: 60px 40px 80px;
|
||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
|||||||
Reference in New Issue
Block a user