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

지금과 같은 경우가 앞으로 퍼블리싱할 때 수도 없이 많이 나옵니다.

그래서 아래의 개념을 반드시 이해하셔야 합니다.

만약 아래 개념을 모두 이해하시면 앞으로 퍼블리싱이 훨씬 편해집니다.

편해진다는건 모든 것을 이해하면 만들 수 있다는 말입니다.

아래 내용을 보시기 전에 일단 중요한 개념인 포지션 속성에서 z-index가 같다는 전제 하에 relative가 absolute 보다 우선 순위라는 점이 중요합니다.

relative가 absolute을 선언하면 기본적으로 z-index: 0 이 됩니다.

a:before와 fa 모두 a의 자식요소이지만 a:before가 fa 보다 html 구조 순서상 먼저 나옵니다.

그래서 우선 순위가 한 단계 더 높습니다.

html에서 a:before 또는 a:after가 보이지 않기 때문에 그냥 .fa랑 똑같은 자식요소라 생각하지만 순서는 .fa 보다 한단계 위입니다.

빨강색이 a태그, 녹색이 a:before 또는 a:after, 그리고 파랑색이 폰트 아이콘인 .fa 입니다.

곧, z-index가 같다면 a:before 또는 a:after가 .fa 보다 위에 있게 됩니다.

그래서 .fa를 a:before 또는 a:after 보다 위로 보내려면...

.fa에 포지션 속성을 주고 z-index 높여주어야 합니다.

======================================

퍼블리싱의 모든 것! HTML 인라인요소, 블록요소, 인라인블록

https://www.inflearn.com/blogs/376

안녕하세요, 인프런 AI 인턴입니다.

lees8351님의 질문은 position 속성, 특히 position: relative와 z-index를 사용하여 :before 가상 클래스와 특정 요소(예: .fa 클래스를 가진 요소) 사이의 겹침 문제를 해결하는 방법에 관한 것으로 보입니다. 본문에서 언급한 상황은 :before 요소가 a 태그의 자식 요소로 생성되어 .fa 요소를 가리는 현상에 대한 의문입니다.

이와 관련하여, 유사한 문제와 그에 대한 답변이 존재하는 질문을 찾았습니다. 해당 질문은 position: relative와 position: absolute 사이의 우선 순위와 z-index가 어떻게 작동하는지에 대한 이해를 요구합니다:

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

질문에서는 position: relative 만으로도 가려졌던 요소가 보이게 되는 원리에 대한 궁금증을 표현했습니다. 답변에서는 z-index가 동일한 경우, position: absolute보다 position: relative가 우선한다는 점을 설명합니다. 즉, :before가 position: absolute를 가지고 있고, .fa에 position: relative를 주면 :before보다 .fa가 우선하여 화면에 표시되는 것입니다.

이는 귀하가 겪고 있는 문제와 직접적으로 연관이 있으며, z-index 값을 조작하여 원하는 요소를 위로 가져오려 했으나 기대한대로 동작하지 않는 이유에 대한 설명을 제공할 수 있습니다. z-index는 요소의 쌓임 순서를 결정하는 속성이지만, position 속성이 static(기본값)인 요소에는 적용되지 않습니다. 따라서, position: relative 등의 포지셔닝 속성을 사용하여 주어진 요소를 문서의 흐름에서 빼내어 쌓임 컨텍스트(Z 축 순서)에 참여시킬 필요가 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.