>  기사  >  웹 프론트엔드  >  CSS의 z-index 속성에 대한 구체적인 분석

CSS의 z-index 속성에 대한 구체적인 분석

黄舟
黄舟원래의
2017-10-21 11:07:051477검색

계단식 컨텍스트: Z축에서 요소의 위치를 ​​나타내는 3차원 개념

스택은 중첩되어 계층적 컨텍스트로 결합될 수 있습니다.
각 계단식 컨텍스트는 계단식 변경 또는 렌더링을 수행할 때 형제 요소와 독립적입니다. 하위 요소만 고려됩니다
각각 각 계단식 배열의 상단과 하단은 독립적입니다.

Layering order


1 background~border
2 负z-index
3 block盒子
4 float浮动盒子
5 inline/inline-block盒子
6 z-index:auto/z-index:0
7 正z-index

Features

음수 값 지원
지원 CSS3 animation
CSS2.1에서는 다음과 같아야 합니다. 위치 지정 요소
와 함께 사용됨z-index 중첩 발생: 마지막에 오는 원칙, 더 큰 것이 먼저 옵니다
중첩이 발생하는 경우: 조상 우선 순위 원칙, 전제는 z-index가 숫자라는 것입니다. auto 대신 값을 사용하면 auto는 계단식 컨텍스트를 생성하지 않습니다.

를 사용하여 요소를 배치합니다. 기본값 z-index: /z-index: 0
z-index auto가 아니면 스택 컨텍스트가 생성됩니다
z-index 스택 순서 비교가 상위 스택 컨텍스트에서 중지됩니다
z-index 혼란스러운 중첩 계층 관계를 방지합니다
z-index 혼란과 스타일 문제를 방지합니다 눈 깜짝할 사이에 산을 더 높게 만드는
음수 값을 사용하여 숨길 수 있습니다

위 내용은 CSS의 z-index 속성에 대한 구체적인 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.