인프런 커뮤니티 질문&답변

작성한 질문수

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

가상클래스 before after 가상클래스 활용한 실전 퍼블리싱 03(SNS 아이콘 애니메이션)

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

작성

417

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

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

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

퀴즈

CSS 애니메이션에서 여러 요소가 동시에 시작하지 않고 순차적으로 나타나도록 만드는 속성은 무엇일까요?

animation-duration

animation-iteration-count

animation-delay

animation-fill-mode

답변 1

지식공유자

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가 우선합니다... 이거는 규칙이니까 그렇게 됩니다.

작성한 질문수