인프런 커뮤니티 질문&답변
작성한 질문수
PC 레이아웃 섹션 상세 퍼블리싱(Project Section) - 탭 콘텐츠 퍼블리싱 #03
해결된 질문
작성
·
265
3
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이 다시 보여지게 되는 이유가 궁금합니다.
답변 2
2
이번 답변은 좀 늦었습니다.ㅠㅠ
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;
}
1
