[해결][스타벅스 클론코딩] 다른 요소에 가려져(?) 버튼 hover이 안된다ㅎㅎㅎ - position과 z-index

자세히 보기 버튼의 hover기능이 작동하지 않는다....ㅠㅡㅠㅡㅠㅡㅠ

왜 그러는지 정확히는 모르겠지만

저 이미지에 가려서 그런게 아닐까 싶은데...

저 요소를 display:none 해서 지워보면 

마우스를 올려보면 hover기능이 활성화 되어서 자세히 보기 버튼의 색이 변한것을 확인했다..!! 

 

이제 저 컵 이미지 때문이란것은 알았따....

조만간 해결책을 꼭 들....고... 오겠ㄸ r..................ㅠㅡㅠㅠㅠㅠㅠㅠㅠ

 

---

ㅋㅋㅋㅋㅋㅋㅋㅋ큐ㅠㅠㅠ

버튼에 z-index : 1을 해줘도 안됐었는데..........

position : relative를 같이 써주니까 바로 해결이 되었다..ㅎㅎㅎㅎㅎㅎㅎㅎㅎ( 바보 )

 

position이 relative나 absolute 이여야 z-index를 사용할 수 있다..!

 

z-index의 특징

• position 속성이 없는 태그들은 나오는 순서대로 쌓인다.
• position 속성이 있는 태그들은 없는 태그들보다 위에 나오는 순서대로 쌓인다.
• position 에 z-index까지 있다면 z-index가 큰 태그가 위에 쌓인다.
• z-index가 아무리 크다고 하더라도 부모 태그의 z-index가 우선이다.
• z-index에 의한 쌓임은 같은 context안의 형제들 끼리의 비교에 의미가 있지, 다른 context의 쌓임 비교는 의미가 없다. ( z-index는 형제들끼리만 비교..!)

 

 

https://www.zerocho.com/category/CSS/post/5a18b330e9c0ec001b08238e

https://www.zerocho.com/category/CSS/post/5a18b330e9c0ec001b08238e