코드에서 Z- 인덱스 관리하기

절대 위치 지정을 사용하면 배치되는 위치를 정확하게 결정할 수 있으므로 겹치기가 가능합니다. 기본적으로 HTML에서 나중에 설명하는 요소는 앞에서 설명한 요소 위에 배치됩니다.

CSS에서 처리 깊이

이 기본 동작을 변경하려면 z-index 라는 특수 CSS 속성을 사용할 수 있습니다. z 축은 요소가 뷰어에 얼마나 가까이있는지를 나타냅니다. 이 이미지는 어떻게 작동하는지 보여줍니다.

Z- 색인 을 사용하면 어떤 요소가 사용자에게 더 가깝게 표시되는지 변경할 수 있습니다.

Z- 색인 속성에는 숫자 값이 필요합니다. 숫자가 높을수록 요소가 사용자와 더 가깝습니다 ( 상위). z- 인덱스 의 값은 요소를 기본 z- 인덱스 인 요소보다 높게 배치합니다. 이 기능은 다른 요소 위에 표시하려는 요소가있는 경우 (예: 다른 텍스트 위에 일시적으로 나타나는 메뉴) 매우 유용 할 수 있습니다.

z-index 효과를 나타내는 코드는 다음과 같습니다. zindex. html

#blueBox {

배경색: 파란색;

너비: 100px;

높이: 100px;

위치: 절대;

왼쪽: 0 픽셀;

상단: 0 픽셀;

여백: 0px; z 지수: 1;

}

#blackBox {

배경색: 검정색;

너비: 100px;

높이: 100px;

위치: 절대;

왼쪽: 50px;

상단: 50 픽셀;

여백: 0px;

}

z- 인덱스 작업

이 코드의 유일한 변경 사항은

z- 인덱스

속성의 추가입니다. Z- 색인 값이 높을수록 해당 객체가 사용자에게 더 가깝게 보입니다. Z-index 를 사용할 때 유의해야 할 몇 가지 사항이 있습니다.

하나의 요소가 완전히 다른 요소를 숨길 수 있습니다. 절대적으로 포지셔닝을 시작하면, 한 요소가 다른 요소에 완전히 덮여 사라질 수 있습니다. z-index

• 속성은이 상황을 확인하는 좋은 방법입니다. 네거티브 Z- 색인 은 문제가 될 수 있습니다.
• Z- 색인 의 값은 양수 여야합니다. 음수 값이 지원되지만 일부 브라우저 (특히 이전 버전의 Firefox)는 해당 값을 제대로 처리하지 못하기 때문에 요소가 사라질 수 있습니다. 모든 값에 Z- 색인 을 부여하는 것이 가장 좋습니다. 일부 요소에 대해
• Z- 색인 을 정의하고 다른 요소에 대해 Z- 색인 을 정의되지 않은 상태로두면, 어떤 일이 발생할지 정확히 보장 할 수 없습니다. 확실하지 않은 경우 모든 값에 자체 Z- 색인 을 부여하면 무엇이 겹쳐 야하는지 정확히 알 수 있습니다. 두 요소에 동일한 Z- 색인 을 부여하지 마십시오.
• Z-index 의 요점은 어떤 요소가 가까이에 있어야하는지 명확하게 정의하는 것입니다. 동일한 페이지에서 두 개의 다른 요소에 동일한 z- 인덱스 값을 할당하여이 목적을 달성하지 마십시오.