웹 위젯(클래식) 에서 z-색인 사용하기

개요

Zendesk 웹 위젯(클래식) 많은 설정 및 사용자 지정 옵션과 함께 제공됩니다. 웹 페이지의 다른 콘텐츠와 관련하여 웹 위젯(클래식) 의 스택 순서를 지정해야 하는 경우가 있습니다. 을(를) 설정하면 됩니다. z-index값을 웹 위젯(클래식) 설정에서 설정합니다.

이 문서에서는 z-index위젯이 웹사이트의 다른 요소와 배열되는 방식을 변경합니다.

고지 사항: 이 문서는 안내 목적으로만 제공되고 있습니다. Zendesk는 코드를 지원하거나 보장하지 않습니다. 문제가 있는 경우 댓글 섹션에 게시하거나 온라인으로 해결 방법을 찾아보세요.

정의 `z-index`?

Z-index 은(는) 겹치는 콘텐츠의 표시 대상 및 위치를 설정하는 데 사용되는 CSS 특성입니다. 두 개의 요소가 겹칠 때 z-index어떤 요소가 다른 요소 위에 표시되는지 결정합니다. The z-index값은 정수로 배정되거나, 상속, 초기 및 설정되지 않음과 같은 전역 값으로 배정될 수 있습니다.

정수를 사용할 때 요소의 z-index가장 높은 인덱스에 배정된 이(가) 다른 요소 앞에 나타납니다. 예를 들어 컨테이너 A에 z-index/ 2이고 컨테이너 B에 a가 배정됨 z-index중 1이면 컨테이너 A가 컨테이너 B 앞에 배치됩니다. 전체 값을 사용할 때 요소는 상위 값을 기준으로 지정된 위치를 사용합니다.

기능 `z-index`웹 위젯(클래식) 과 관련이 있나요?

다음과 같이 할 수 있습니다. z-index웹 위젯(클래식) 앞에 콘텐츠를 표시하거나, 웹 웹 위젯(클래식) (웹 위젯(클래식) 다른 콘텐츠 뒤에 완전히 숨길 수 있습니다.

설정하려면 어떻게 해야 하나요? `z-index`웹 위젯(클래식) 용?

다음을 설정할 수 있습니다. z-index다음 두 가지 방법으로 위젯에 사용할 수 있습니다.

다음을 사용하세요. window.zESettings개체입니다. 설정합니다. z-index위젯이 처음 로드될 때 사용에 대한 자세한 내용은 window.zESettings개체에 대한 자세한 내용은 개발자 문서를 참조하세요. 설정 참고자료를 참조하세요.
다음을 사용하세요. updateSettingsAPI. 이렇게 하면 z-index실행 시간에 업데이트됩니다. 사용에 대한 자세한 내용은 updateSettingsAPI: 개발자 문서를 참조하세요. Core API.

참고: 웹 위젯(클래식) z-index기본적으로 인덱스 999998로 설정되어 있는데, 이는 다른 개체의 z-index이 수를 초과합니다.

window.zESettings 개체 사용 예

The window.zESettings개체를 사용하여 z-index페이지 로드 시.

이 예에서는 z-index을(를) 사용하여 window.zESettings개체입니다. 참고로 window.zESettings위젯이 부팅될 때에만 개체가 로드됩니다. 업데이트하려면 다음과 같이 하세요. z-index값을 updateSettings자세한 내용은 아래 예를 참조하세요.

다음은 변경 전 페이지의 모습입니다. z-index웹 위젯(클래식) 의 값입니다. 예상대로 웹 위젯(클래식) 이 다른 콘텐츠 위에 나타납니다.

위의 예에서는 z-index컨테이너 요소의 이(가) 명시적으로 설정되지 않았습니다. 즉, z-index의 컨테이너 요소는 기본적으로 0에 해당하는 자동으로 설정됩니다. 웹 위젯(클래식) 숨기려면 z-index다음과 같이 0보다 작은 값:

이제 페이지가 로드될 때 웹 위젯(클래식) 이 컨테이너 요소 뒤에 나타납니다. 그 이유는 z-index컨테이너 요소의 값이 다음보다 큽니다. z-index웹 위젯(클래식) 의 값입니다.

새로운 z-index값을 지정하면 웹 위젯(클래식) 이 웹 페이지의 다른 요소 뒤에 나타납니다.

다음을 사용한 예 `updateSettings`API

The updateSettingsAPI를 통해 실시간으로 유연하게 변경할 수 있습니다.

이 예에서는 모달에 z-index/ 2. 변경만 z-index위젯을 숨기거나 화면 앞으로 가져옵니다.

예 1: 모달 뒤에 웹 위젯(클래식) 숨기기

첫 번째 예에서는 웹 위젯(클래식) 모달 뒤에 숨기려면 위젯의 z-index아래에 표시된 대로 1로 변경합니다.

사용 사례 보기:

예 2: 웹 위젯(클래식) 모달 맨 앞으로 가져오기

이 예에서는 페이지에서 계속 액세스할 수 있도록 웹 위젯(클래식) 이 모달 앞에 표시되도록 하는 방법을 보여줍니다. 이 예에서는 다시 한 번 zE webWidget을 사용하여 updateSettings및 설정 z-index3으로 변경합니다. 이로써 웹 위젯(클래식) 의 위치가 효과적으로 이동됩니다.

사용 사례 보기:

요약 및 추가 리소스

웹 개발자는 z-index웹 위젯(클래식) 의 값입니다. The window.zESettings개체를 통해 z-index페이지 로드 시 updateSettingsAPI를 통해 실시간으로 유연하게 변경할 수 있습니다. 위젯 사용자 지정에 대한 자세한 내용은 웹 위젯(클래식)의 고급 사용자 지정 문서를 참조하세요.

번역 고지 사항: 본 문서는 콘텐츠에 대한 기본적인 이해를 제공하기 위해 자동 번역 소프트웨어를 사용하여 번역되었습니다. 정확한 번역을 제공하고자 합당한 노력을 기울였으나 Zendesk는 번역의 정확성을 보장하지 않습니다.

번역된 문서에 포함된 정보의 정확성과 관련하여 질문이 있으시면 문서의 공식 버전인 영문 버전을 참조하시기 바랍니다.

개요

정의 z-index?

기능 z-index웹 위젯(클래식) 과 관련이 있나요?