CSS로 레이아웃을 디자인할 때 요소를 위/아래 또는 왼쪽/오른쪽에 배치하는 경우가 많습니다. z-index 스택 효과(서로의 상단)와 함께 Z축의 3차원 요소를 이동할 수 있습니다.
z-index 속성은 auto를 사용합니다. 키워드 또는 정수. 다음은 모두 유효한 선언입니다.
z-index: auto; z-index: -1; z-index: 9999;
참고 :Z-색인을 적용하려면 position을 사용하여 요소의 위치도 지정해야 합니다. 속성은 상대적, 절대적 또는 고정적입니다. 위치를 지정하지 않으면 z-index: auto를 적용하는 것과 동일합니다. 스택 컨텍스트가 적용되지 않습니다.
이를 염두에 두고 한 가지 예를 살펴보겠습니다.
기니피그를 배치하자
이 예제는 Codepen에서 확인할 수 있습니다. 가지고 놀고 저와 함께 코딩하세요!
기니피그 두 마리 또는 Cuys를 배치합니다. (훨씬 더 귀엽게 들림). 우리가 여름에 있다고 상상해 봅시다. 그래서 밖은 90도 이상입니다. Cuy # 1은 호수 안에 배치됩니다. 그녀는 좋은 시간을 보낼 것입니다. Cuy#2는 매우 게으르므로 그를 깨우기 위해 커피를 주어야 합니다! 그래서 우리는 Cuy#2를 커피와 함께 쌓아 그가 마실 수 있도록 하겠습니다.
위치 지정이나 CSS가 없으면 이미지가 대략 다음과 같이 보입니다.
아이디어는 z-색인을 사용하여 스택 컨텍스트를 만든 다음 호수와 커피 위에 일부 이미지를 배치하는 것입니다.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.
또한 z-색인을 적용하려면 요소에 위치 지정을 추가해야 합니다. 계속해서 Cuy#1의 위치를 지정해 보겠습니다.
img.cuy.one {
position: absolute;
} 도대체 우리 친구는 어디에 있는 걸까? 계속해서 더 높은 스택 컨텍스트를 추가하여 호수 상단에 있도록 합시다.
img.cuy.one {
position: absolute;
z-index: 1;
} 야! 우리 cuy는 호수 위에 있습니다. 이제 호수 내부에 배치하기 위해 패딩을 추가해야 하지만 그걸 가지고 놀게 두겠습니다.
이제 z-index를 사용하여 스택 컨텍스트를 만드는 방법을 알게 되었습니다. , 두 번째 동물을 매우 쉽게 배치할 수 있습니다.
img.cuy.two {
position: absolute;
width: 160px;
padding: 100px;
z-index: 1;
} 다시 패딩은 이미지의 정확한 위치를 지정하기 위한 것이며 너비는 작은 친구의 크기를 지정하는 데만 사용됩니다. 이것으로 우리는 우리의 임무를 마쳤고 모두가 행복하고 상쾌합니다.
결론
z-index를 가지고 놀기 흥미로운 레이아웃 아이디어를 제공합니다. Codepen에서 나는 또한 모든 것 위에 z-index가 있는 팝 채팅 디자인의 두 번째 예를 제공했습니다. 확인해 보세요!
잊지 마세요 항상 요소를 배치해야 하며 그렇지 않으면 z-색인이 작동하지 않습니다. 위치를 제거하여 Codepen을 재생하고 직접 확인하십시오.
또 다른 권장 사항은 z-색인을 형제 요소에 적용해야 한다는 것입니다. 우리의 예에서 우리의 이미지는 중첩되지 않았고 형제였습니다(나란히). 깊게 중첩된 요소가 있는 경우 z-색인이 예상대로 작동하지 않을 수 있습니다. . 따라서 염두에 두십시오.