자동, 0, Z-색인 없음의 차이점

웹페이지에서 요소의 위치는 개발자가 할당한 중요한 속성입니다. 요소가 올바르게 배치되지 않으면 무의미하거나 정리되지 않은 것처럼 보일 수 있습니다. 따라서 개발자는 각 HTML 요소의 위치를 ​​현명하게 할당하는 것이 매우 중요합니다.

때때로 요소는 각각의 위치가 지정되었음에도 불구하고 겹칠 수 있습니다. 이러한 겹치는 요소는 서로 겹쳐서 다른 요소를 숨길 수 있습니다. 이 문제를 해결하기 위해 CSS는 웹 디자인을 위한 z-index 속성을 제공합니다. 이번 글에서는 CSS의 z-index 속성에 대해 알아 보겠습니다. 또한 z-index의 다양한 값과 그 차이점에 대해서도 논의하겠습니다.

Z-색인 속성이란 무엇인가요?

CSS의 z-index 속성을 사용하면 개발자는 z축에서 겹치는 요소의 순서(예: 화면상 또는 화면 외부)를 지정할 수 있습니다. 그러나 z-index 속성은 지정된 static 이외의 위치 값이 있는 요소에서만 작동합니다.

HTML 요소의 스택 수준은 z-index 속성에 의해 결정됩니다. Z축의 요소 위치를 "스택 수준"(X축 또는 Y축과 반대)이라고 합니다. 값이 높을수록 요소는 스택 순서의 맨 위에 더 가깝게 배치됩니다. 이 스태킹 배열은 뷰포트 또는 모니터에 수직입니다.

HTML 페이지의 Z축 구성 요소가 자연스럽게 쌓이는 순서는 다양한 요인의 영향을 받습니다. 이는 네거티브 스태킹 컨텍스트가 있는 요소, 위치가 지정되지 않은 요소, 부동되지 않은 요소, 블록 수준 요소, 위치가 지정되지 않은 요소, 부동 요소, 인라인 요소 및 위치가 지정된 요소가 모두 표시 순서대로 있습니다.

문법

으아악

다음은 이 속성의 값입니다 -

• Auto - 겹치는 순서는 상위 값과 동일합니다. 기본값입니다.

• Numbers- 겹치는 시퀀스는 1, 2, 3 등과 같은 숫자로 지정됩니다.

• 초기 - 주문이 기본값으로 설정됩니다.

• Inheritance - 겹치는 순서는 상위 요소에 상속됩니다.

예

으아악

z-index 속성의 자동 값

z-index 속성의 auto 값은 상위 요소와 동일한 요소 순서입니다.

예

으아악

z-index 속성 값이 0입니다

z-index 속성의 0 값은 요소 순서의 숫자 값입니다. 누적된 콘텐츠를 생성하려면 Z-색인 값을 0으로 지정하세요. 예를 들어, element1과 element2라는 두 개의 요소가 있는 경우 해당 요소의 z-인덱스는 각각 1과 0입니다. 따라서 요소 1은 요소 2 위에 쌓이게 됩니다. 그리고 z-인덱스가 각각 -1과 0인 경우 요소 1은 요소 2 아래에 쌓입니다. 다음 예를 고려하십시오.

예

으아악

z-index 속성에는 값이 없습니다

z-index 속성의 값은 일반적으로 auto 값과 동일하지 않습니다.

예

으아악

결론

어려운 주제는 CSS에 컨텍스트를 쌓는 것입니다. 이 기사에서는 웹 페이지의 스택 컨텍스트가 Z-색인에 의해 어떻게 영향을 받는지 포괄적으로 설명합니다. z-색인은 완전히 이해되면 강력한 CSS 속성으로 변환됩니다. 이제 이 기능에 익숙해졌으므로 새로운 개발자는 이 기능을 효과적으로 사용하고 발생할 수 있는 몇 가지 일반적인 문제를 피할 수 있습니다. 또한 고급 개발자는 z-index를 적절하게 적용하면 어떻게 다양한 레이아웃 문제를 해결하고 다양하고 창의적인 CSS 디자인 옵션을 제공할 수 있는지 더 잘 인식해야 합니다.

위 내용은 자동, 0, Z-색인 없음의 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!