[CSS] position으로 요소 겹치기

동아리 홈페이지를 만들던 중 mouse hover 시 프로젝트 명이 포함된 바로가기...? 아무튼 클릭을 유도하는 식으로 이미지가 변하는 걸 구현해야 했다.

이전 프로젝트에서도 비슷하게 hover 때 바뀌는 이미지를 구현했었는데 그때 코드를 참고하려고 봤더니 웬 state까지 동원해서 onMouseEnter, onMouseLeave 이런 걸로 구현을 했었다 (...) 이것도 좋은 방법인지는 모르겠지만 전보단 훨씬 낫기 때문에 ^__^

---

처음에는 어차피 그냥 배경이 검은색이니까 이미지에 hover 시 opacity 속성을 주려고 했으나 프로젝트 명도 들어가야 되기 때문에 방향을 틀었다. 그래서 Card 컴포넌트로 CardImage, CardHover를 감싸서 두 개를 겹쳐놓고 CardHover는 보였다 안 보였다 하게 만들고 싶었다.

 

 

위처럼 부모 Card에 relative를 주고, 자식 CardHover에 absolute를 주면 Card 속 CardImage와 똑같은 위치에 CardHover를 겹칠 수가 있다(absolute 요소 위치는 left: 0, top: 0). 혹시 몰라 크기도 다 통일해줬고, CardImage보다 위로 올리기 위해 z-index를 적당히 9로 올려 줬다.

 

absolute는 static 속성을 가지고 있지 않은 조상을 기준으로 움직이기 때문에 부모인 Card에 relative을 준 후 자식인 CardHover에서 absolute로 위치를 조정해야 한다. 만약 조상 중에 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이 된다.

리액트 CSS div 위에 div 겹치기 요소 겹치기 이미지 겹치기 영역 겹치기