z-index 예제

z 인덱스 CSS 속성은 위치 된 요소와 해당 하위 항목 또는 플렉스 항목의 z 순서를 설정 합니다. z 인덱스가 큰 겹치는 요소는 더 작은 요소를 포함합니다. img { 위치: 절대; 왼쪽: 0px; 상단: 0px; z-인덱스: -1; } 위치 가 있는 상자(즉, 정적 이외의 위치가 있는 상자)의 경우 z-index 속성은 몇 년 후에도 여전히 true를 유지합니다. z 인덱스를 알아내려고 미쳐 가기 전에 오버 플로우를 확인하십시오. z-index:1000 이상을 주는 것이 좋다는 것을 알려주십시오. 컨텍스트 누적의 주요 요점은 z-index를 사용하여 자체 스태킹 컨텍스트 내에서만 요소의 스태킹 순서를 다시 정렬할 수 있다는 것입니다. 전체 스태킹 컨텍스트에는 z-index 속성과 해당 부모 스택 컨텍스트의 형제에 의해 결정되는 스태킹 컨텍스트 내의 스태킹 위치가 있습니다. 따라서 다른 스태킹 컨텍스트의 요소는 최종 스태킹 순서로 인터리브되지 않습니다(스태킹 컨텍스트가 “원자성”이라고 말하는 경우 사양이 의미하는 내용입니다). 주: z-index는 위치가 있는 요소(위치: 절대, 위치: 상대, 위치: 고정 또는 위치: 고정)에서만 작동합니다. 위치에 배치된 요소에 z-index를 사용하여 기본 스태킹 순서를 변경할 수 있습니다. DIV #2 양수(0 및 비자동) z 인덱스 값이 할당되면 다른 모든 DIV 위에 렌더링됩니다. 또한 z-인덱스가 2임에도 불구하고 녹색 자식-1이 모든 것의 맨 위에 나타나는 이유는 무엇입니까? 우리는 높은 z-인덱스가 낮은 z-인덱스보다 “승리”라고 말하지 않았습니까? 이 마지막 예제에서는 DIV #2 및 DIV #4 HTML 요소의 계층 구조에서 다른 부모에 속하기 때문에 형제가 아님을 확인할 수 있습니다. 그럼에도 불구하고 DIV #2 관련하여 DIV #4 스태킹은 z-index를 통해 제어할 수 있습니다.

DIV #1 및 DIV #3 z-index 값이 할당되지 않으므로 스태킹 컨텍스트를 만들지 않습니다. 즉, DIV #2 및 DIV #4 포함한 모든 콘텐츠가 동일한 루트 스태킹 컨텍스트에 속합니다. 나는 항상 CSS 속성 z-인덱스로 고생했습니다. 처음에는 너무 쉽게 들립니다. z 인덱스 값이 높은 요소는 z 인덱스 값이 낮은 요소 앞에 표시됩니다. 그럼에도 불구하고 z-index 값이 전혀 영향을 미치지 않는 것처럼 보이는 상황에서 많은 시간을 마쳤습니다. 빨간색 부모와 파란색 부모가 각각 고유한 로컬 스태킹 컨텍스트를 생성한다는 것을 이해하면 z 인덱스가 훨씬 높더라도 blue-child-2가 빨간색 부모 아래에 나타나는 이유를 파악하는 데 도움이 됩니다. z-index는 로컬 스태킹 컨텍스트 내에서 요소의 위치만 제어하므로 blue-child-2는 확실히 모든 파란색 부모 자식위에 있을 것입니다. 그러나 빨간색 부모는 파란색 부모보다 z 인덱스가 더 높으며, 빨간색 부모 내부의 모든 요소는 z 인덱스가 무엇인지에 관계없이 파란색 부모보다 높게 표시됩니다. 유일한 스태킹 컨텍스트는 루트 컨텍스트입니다. z 인덱스가 없으면 요소가 발생 순서대로 누적됩니다. .mc-modal-bg { 위치 : 상대; z 인덱스 : 99995 !중요; } 뛰어난 시각적 예, 나는 그것의 작동 “z-인덱스 :2;” 시도 위치 속성의 기본값은 정적이며 정적 요소는 표시되는 순서를 초과하여 z-index 값을 갖지 않습니다.

Comments are closed.