웹에 배포할 이력서 만드는 중인데
z-index가 안먹는다..
<ContentsArea style={{ position: 'relative' }}>
<BGTextWrap style="position: absolute, zIndex: '1'">
<Text>---TEXT---<Text>
</BGTextWrap>
<ListWrap style="position: absolute, zIndex: '2'">
{renderList}
</ListWrap>
</ContentsArea>
보통 이러면 먹어야 하는데
안되는걸 본적없어서 머리가 띵하다.. 내다버린 3년
--- 추가 ---
이게 안될리가 없다며 현실부정하면서 끝까지 구글선생님께 여쭤보지않은 나.
쌓임스택과 연관이 있을거라 생각하며 위치만 주구장창 바꾸던 나.
결국 인정하고 구글선생님게 물어본 나.
const renderList = arr.map();
renderList에서 return 하는 TSX에 Styled-components를 사용하고 있었는데
여기에 Opacity값이 변하는 애니메이션을 넣어놨었다.
리서치해보니 opacity값을 줄 경우 z-index 값이 0으로 임의 지정된다.
거기에 transform 사용시에도 z-index 값이 0으로 .......
정말 내다버린3년 공부좀 열심히 해야겠다 이런것도 모르다니
오늘 알았으니까 상관없겠지
++ 나는 그런거 없고 background 값 안줘서 통과되서 보였던거 였음 ㅋㅋㅋ ㅠ