PC 레이아웃 섹션 상세 퍼블리싱(Project Section) - 탭 콘텐츠 퍼블리싱 #03

Question

14:33 .project-info:before에 있는 텍스트 01이 본문에 글자를 가리는 현상에 대해 h3에 position:relative;를 줘서 .project-info:before에 있는 position:absolute보다 우선순위를 높이는 방법으로 해결하셨는데  지금과 같은 경우는 h3만 가리기 때문에 상관없지만 예를들어 위의 이미지처럼 글자 크기가 커서 본문 전체 내용을 가리는 스타일을 만들게 되면 일일이 모든 태그에 position:relative를 줘서 본문 글자들을 앞으로 오게 해야되서 굉장히 번거롭게 되서 z-index를 써서 한번 해봤는데 이해가 안되는 부분이 생겨 질문드립니다.   이 두 번째 이미지는 01이 가리는 글자들에 대해 position:relative를 주지 않고 z-index를 통해 01을 뒤로 보낸 이미지입니다. 1) .project-info:before에 z-index를 -1 값을 주면 01이라는 글자가 아예 사라져 버리는데 이유가 궁금합니다. 2) .project-info에 z-index:1 값을 줘야 비로소 사라진 01이 다시 보여지게 되는 이유가 궁금합니다.

코딩웍스(Coding Works) · Answer

이번 답변은 좀 늦었습니다.ㅠㅠ 1) .project-info:before에 z-index를 -1 값을 주면 01이라는 글자가 아예 사라져 버리는데 이유가 궁금합니다. position 속성은 기본적으로 z-index는 0입니다. z-index를 -1로 주면 아예 밑으로 숨어버리기 때문에 보이지 않습니다. 만약 position: relative가 있고 position: absolute가 있다면 relative가 우선합니다. 단, 2가지 모두 z-index가 속성이 없다는 기준에서 입니다. 2) .project-info에 z-index:1 값을 줘야 비로소 사라진 01이 다시 보여지게 되는 이유가 궁금합니다. 제가 코드를 보니까 .project-info:before의 폰트 사이즈를 키우니까 p 태그를 가리더군요. 그래서 만약에 .project-info:before의 폰트 사이즈를 키우시면 p 태그에 relative를 주세요. .project-info h3 {   font-size: 20px;   position: relative; } .project-info p {   font-size: 16px;   line-height: 1.5em;   position: relative; /* 추가된 속성 */  } /* 이 부분에서 z-index를 주지 않았으니까 z-index: 0 인 상태입니다. */ .project-info:before {   content: attr(data-text);   font-size: 300px; /* 폰트 사이즈를 키워서 테스트함 */   color: #eee;   position: absolute;   top: -10px;   left: 10px; }

Next · Answer

답변 감사합니다~