CSS에서 요소의 스택 순서를 구문 분석합니다.

• z-index 속성과 position 속성이 포함되지 않은 경우 모든 요소의 스택 순서는 동일합니다. HTML 문서와 동일하게 나타나는 순서는 동일합니다. (인라인 요소를 겹치기 위해 음수 여백을 사용하는 특별한 경우는 제외.)

• 요소가 부동되면 부동 블록 요소는 위치가 지정되지 않은 블록 요소와 위치가 지정된 블록 요소 사이에 배치됩니다. 즉, 부동 요소는 일반 흐름에서는 하위 블록 요소 위에 나타나고 일반 흐름에서는 하위 인라인 요소 아래에 나타납니다.

• 요소에 position 속성을 추가하면 position 속성이 있는 모든 요소와 해당 하위 요소가 position 속성이 없는 다른 요소 위에 표시됩니다.

• z-index는 position 속성이 설정된 요소에만 유효합니다. position 속성이 없는 요소의 z-index 속성은 적용되지 않습니다.

z-index 속성은 스태킹 컨텍스트를 생성합니다.

앞이나 뒤로 함께 이동하는 공통 상위 요소가 있는 요소 그룹은 스태킹 컨텍스트를 형성합니다. . 각 스택 컨텍스트에는 단일 루트 요소가 있습니다. 요소에 새 스택 컨텍스트가 형성되면 스택 컨텍스트의 모든 하위 요소는 스택 순서에서 고정된 영역으로 제한됩니다. 스태킹 컨텍스트는 전체를 형성하며 내부 요소의 스태킹 순서가 상대적으로 다릅니다. 그러나 다른 스태킹 컨텍스트와 비교할 때 전체적으로만 위아래로 이동할 수 있습니다.

일반인의 관점에서 요소가 스태킹 컨텍스트의 맨 아래에 배치되면 더 높은 수준의 다른 스태킹 컨텍스트 요소 위에 표시할 수 있는 방법이 없습니다. z-인덱스가 무한으로 설정합니다.

스태킹 컨텍스트의 구성 규칙

• 문서

• 요소의 루트 요소에는 위치 속성( static 속성 제외), z-index 속성도 auto로 설정합니다.

• 요소에는 opacity 속성이 있고 값은 1보다 작습니다.

• 필터, CSS 영역 및 오프스크린 렌더링이 필요한 기타 속성과 같은 일부 새로운 CSS 속성을 사용하면 요소가 스태킹 컨텍스트를 형성할 수 있습니다.

• 위치:고정을 지정하는 요소의 경우 기술적인 Z-인덱스는 자동입니다.

동일한 스택 내 하위 요소의 스택 순서 context

아래에서 위로(root < -index < index-aotu < +index < position):

1. 스태킹 컨텍스트의 루트 요소 .

2. 에는 position 속성이 설정되어 있고 음수 z-index를 가진 요소와 그 하위 요소, 더 큰 z-index 값을 가진 요소가 더 작은 요소 위에 배치되고, 동일한 속성 값을 가진 요소 요소는 html에 나타나는 순서대로 쌓입니다.

3. 위치가 설정된 요소가 없습니다.

4. 에는 position 속성이 설정되어 있고, z-index 속성은 auto입니다.

5. 에는 position 속성이 설정되어 있고, z-index가 있습니다. 속성은 자동 양수 값 요소입니다.

다른 스태킹 컨텍스트의 사례

• 스태킹 컨텍스트는 다른 스태킹 컨텍스트를 삽입할 수 있습니다.

• 각 스택 컨텍스트와 해당 통계 컨텍스트는 독립적입니다.

• 스태킹 컨텍스트의 하위 요소는 위에서 언급한 순서대로 배치됩니다.

• 스태킹 컨텍스트 내 하위 스택 컨텍스트의 z-index는 상위 스택 컨텍스트 내에서만 의미가 있습니다.

정말 심오하고 좀처럼 탐구되지 않은 지식 영역입니다. 요약을 천천히 실천해 보세요!

[관련 추천]

1. 무료 CSS 온라인 동영상 튜토리얼

CSS 온라인 매뉴얼

3. php.cn Dugu Jiujian (2)-css 동영상 튜토리얼

위 내용은 CSS에서 요소의 스택 순서를 구문 분석합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!