내다버린 3년 (feat. z-index)

정규상·2022년 1월 7일
0
post-thumbnail

웹에 배포할 이력서 만드는 중인데
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 값 안줘서 통과되서 보였던거 였음 ㅋㅋㅋ ㅠ

profile
이것 저것 다해보는 삶

0개의 댓글