position:fixed와 transform

결론부터 간단히 짚고 넘어가자면, transform으로 위치를 옮긴 요소의 자식은 position: fixed를 써도 고정되지 않습니다.

https://www.w3.org/TR/css-transforms-1/#transform-rendering

여기서 상세한 설명을 읽으실 수 있습니다.

요소에 배경을 넣으면 글자가 읽기 힘들어져서, 전 보통 이미지의 opacity를 낮추고 배경을 검은색으로 만든 뒤, 글자를 흰색으로 변경합니다.

그때, background-image의 opacity 조절을 위해 새 자식 요소를 만들고, 그 요소의 opacity를 조절합니다.

이번에 드로워의 배경도 똑같이 만들다 문제에 봉착했는데, 드로워를 스크롤 하면 자식 요소에 부여한 position: fixed가 position: absolute인 양 작동한단 겁니다.

해결을 위해, 배경 이미지가 들어갈 요소를 밖으로 뺀 뒤, 드로워와 똑같은 상황에서 똑같이 움직여 마치 한 요소인 것처럼 보이게 했습니다.

<nav id="Leftnav" class="simplebar">

<!-- Something -->

</nav>

<div id="LeftBG">

<div style="background-image:url()" class="bg reveal"></div>

<div style="background-image:url()" class="bg"></div>

<div style="background-image:url()" class="bg"></div>

</div>

#Leftnav {

position: fixed;

top: 0;

visibility: hidden;

opacity: 0;

width: 400px;

height: 100%;

max-width: 100%;

z-index: 2000;

background: rgba(0, 0, 0, .5);

color: #fff;

transition: .5s

}

#Leftnav,

#LeftBG {

left: 0;

transform: translateX(-400px)

}

#LeftBG {

position: fixed;

width:400px;

height:100%;

background: #000;

opacity: 0;

z-index: 1995

}

.navrevealed #Leftnav,

.navrevealed #LeftBG {

opacity: 1;

visibility: visible;

transform: translateX(0)

}

#LeftBG .bg {

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

opacity: .5;

background-size: cover;

background-position: center;

background-repeat: no-repeat;

}

드로워와 배경은 같은 조건에서 같이 움직이며, 드로워엔 반투명한 검은 배경을, 배경에도 적당한 투명도 조절을 해서 드로워의 배경처럼 보이게 했습니다.