z-index 예제

z 인덱스 속성은 이 3차원 브라우저 환상에서 요소의 페인트 순서를 나타냅니다. 기본적으로 모든 요소에는 z 인덱스가 0이고 브라우저는 DOM 순서로 페인트됩니다. 그러나 z-index는 실제로 요소가 페인팅될 때 를 세밀하게 제어할 수 있게 합니다. 더 높은 z-index를 할당하면 요소 페인트를 사용자에게 « 더 가깝게 » 만들 수 있으며 더 낮은(또는 음수)을 할당할 수 있습니다. z-index를 사용하면 요소를 캔버스에 더 가깝게 페인칠할 수 있습니다. 요소에 z-인덱스를 적용할 때만 컨텍스트가 형성되는 것은 아닙니다. 요소가 스태킹 컨텍스트를 형성하는 몇 가지 다른 속성이 있습니다. 몇 가지 예는 필터, 불투명도 및 변환입니다. 이봐 레! 위치를 추가해야 할 수 있습니다. 또는 그 효과에 뭔가. z-index에서는 규칙 집합에서 요소의 위치를 명시적으로 선언해야 합니다. 이제 이러한 요소의 누적 순서를 변경하려면 속성 z-index를 사용할 수 있습니다.

z 인덱스가 높은 요소는 z 인덱스가 낮은 요소 앞에 표시됩니다. 한 가지 주의해야 할 점은 z-index가 위치 된 요소에서만 작동한다는 것입니다. z-index의 두 번째 주의 사항을 고려할 때 z-index 주변의 물은 더 진흙투성이가 됩니다: 스태킹 컨텍스트 내에 위치한 요소에만 적용됩니다. 감사합니다, 나는 오늘 다시 Z 인덱스와 싸우고있다. 처음으로 내가 이길 수 있다고 생각! z 인덱스에 첨부 된 첫 번째 주의 사항은 적용하기 위해 위치 된 요소에 있어야한다는 것입니다. 즉, z-index는 정적 이외의 위치를 설정한 경우에만 스태킹 순서를 변경하는 데 사용할 수 있습니다. 요소에 대한 위치를 설정하지 않은 경우 z-index는 효과가 없습니다. Z-인덱스가 없는 경우 DOM 순서로 스택을 수행하지만 위에 배치 된 물건으로 도처에 배치된 수레가 비 수레 앞에 가져온다는 점도 언급 할 가치가 있습니다 (그러나 배치 된 상자 뒤에). 기본적인 예제부터 살펴보겠습니다. 루트 스태킹 컨텍스트에는 두 개의 DIV(DIV #1 및 DIV #3)가 있으며, 둘 다 상대적으로 위치가 지정되었지만 z 인덱스 속성이 없습니다. DIV 내부에는 절대적으로 배치 된 DIV #2 #1 DIV#3 z 인덱스 속성이없는 절대적으로 배치 된 DIV #4 있습니다.

z 인덱스가 높은 주황색 상자가 파란색 상자 앞에 표시됩니다. z-index:1000 이상을 주는 것이 좋다는 것을 알려주십시오. 주: z-index는 위치가 있는 요소(위치: 절대, 위치: 상대, 위치: 고정 또는 위치: 고정)에서만 작동합니다. 그린 자식-1부터 시작해 봅시다. 녹색-부모-녹색-부모-의 z 인덱스를 가지고 있기 때문에, 우리는 녹색 부모도 다른 무엇보다도 높을 것으로 예상합니다. 그러나 z-index를 사용하는 첫 번째 주의 사항을 다시 기억하면 정적 위치에 있는 요소에는 영향을 미치지 않습니다. 즉, 녹색 자식-1 루트 스태킹 컨텍스트의 일부이며, 루트 스태킹 레이어의 다른 2개 요소인 빨간색 부모 및 파란색 부모에 대해 측정됩니다. 두 가지 모두보다 z 인덱스가 높기 때문에 맨 위에 표시됩니다. 위치가 지정된 상자(즉, 정적 이외의 위치가 있는 상자)의 경우 z-index 속성은 DIV #2 양수(0이 아닌 및 비자동) z 인덱스 값이 할당된 경우 다른 모든 DIV 위에 렌더링됩니다. https://css-tricks.com/rational-z-index-values/ 위치에 있는 요소에 z 인덱스를 사용 하 여 기본 스태킹 순서를 변경할 수 있습니다. 또한 z-인덱스가 2임에도 불구하고 녹색 자식-1이 모든 것의 맨 위에 나타나는 이유는 무엇입니까? 우리는 높은 z-인덱스가 낮은 z-인덱스보다 « 승리 »라고 말하지 않았습니까? 분홍색 상자 자식 요소의 적층 순서를 변경할 수 있습니다.

Ce contenu a été publié dans Non classé par samuel. Mettez-le en favori avec son permalien.