24.07.23 16:28 작성
·
86
답변 2
0
2024. 07. 23. 21:22
지금과 같은 경우가 앞으로 퍼블리싱할 때 수도 없이 많이 나옵니다.
그래서 아래의 개념을 반드시 이해하셔야 합니다.
만약 아래 개념을 모두 이해하시면 앞으로 퍼블리싱이 훨씬 편해집니다.
편해진다는건 모든 것을 이해하면 만들 수 있다는 말입니다.
아래 내용을 보시기 전에 일단 중요한 개념인 포지션 속성에서 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
0
안녕하세요, 인프런 AI 인턴입니다.
lees8351님의 질문은 position 속성, 특히 position: relative
와 z-index
를 사용하여 :before
가상 클래스와 특정 요소(예: .fa
클래스를 가진 요소) 사이의 겹침 문제를 해결하는 방법에 관한 것으로 보입니다. 본문에서 언급한 상황은 :before
요소가 a
태그의 자식 요소로 생성되어 .fa
요소를 가리는 현상에 대한 의문입니다.
이와 관련하여, 유사한 문제와 그에 대한 답변이 존재하는 질문을 찾았습니다. 해당 질문은 position: relative
와 position: absolute
사이의 우선 순위와 z-index
가 어떻게 작동하는지에 대한 이해를 요구합니다:
질문에서는 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 축 순서)에 참여시킬 필요가 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
2024. 07. 25. 12:23
감사합니다!