relative 선언만으로 before의 bgc에 가려져있던 아이콘이 보이는 부분이 이해가 안갑니다.

Question

천천히 따라하다가 글자가 안보여 z-index : 1 을 fa에게 주어서 before보다 위로 올라오게 하려고 하였으나 적요되지 않았습니다.

강의에서는 position:relative 선언만으로도 글자가 보이게 됐는데 이해가 잘 되지 않습니다.

position: relative를 선언해줌으로써 부모와의 관계가 생기게 되어 뒤에 있던 글자가 위로 쌓이게 된 것인지 궁금합니다

Answer

z-index가 같다는 기준에서 position: absolute 보다 position: relative가 우선합니다.

a태그의 자식요소인 :before와 .fa 2개가 있습니다.

:before에 position: absolute가 있어서 .fa보다 우선합니다.

그러나 .fa에 position: relative를 주면 :before보다 우선합니다. 그러서 .fa가 :before 위로 올라옵니다.

z-index가 같다는 기준에서 position: absolute 보다 position: relative가 우선합니다... 이거는 규칙이니까 그렇게 됩니다.