안녕하세요 맥북사고 기분좋아서 미쳐 날뛰는중인 17살 웹개발자 dev.Aura 입니다.
저번시간에 z-index에 대해서 약간 알고 넘어왔는데요, 알고보니 z-index가 꾀 많은양의 내용이 있더라구요..
제가 머리에 다 넣고 이해하기쉽게 설명해드리기는 제 실력이 너무 딸려버리므로.. 외국 문서를 한국어로 해석하여서 작성하겠습니다.
출처는 이미지에 담겨져 있습니다.
즉시 분명하지 않을 수 있지만, HTML 문서 내의 요소가 입체적으로 생성된다. X 축 및 Y- 축에 정렬되고 게다가, 요소는 제 차원에서의 위치를 제어하는 Z 축에 놓여있다.
이러한 마진, 플로트, 오프셋 속성과 같은 속성이 요소는 x 축과 y 축 축에 앉는 방법을 제어합니다. Z- 색인 속성은 전적으로 요소가이 z 축에 배치되는 방법을 제어합니다.
Z- 인덱스 속성
Z- 색인 속성은 두 가지를 지정합니다 -
이 호텔은 위치 요소에 적용됩니다. 즉,이 요소입니다 위치 의 상대 , 절대 , 또는 고정을 .
세 가지 잠재적 인 값이 있습니다 Z- 색인 속성 -
| 값 | 기술 |
|---|---|
자동 | 0 적층 레벨을 설정하고 새로운 스택 문맥을 확립하지 않습니다 |
<정수> | 정수에 적층 레벨을 설정 하고 새로운 스택 문맥을 설정 |
상속 | 그 부모 요소의 새로운 적층 컨텍스트를 설정하지 않는 것과 동일한 적층으로 레벨을 설정 |
Z- 인덱스 : 자동 | <정수> | 상속
스태킹 수준
적층 단계는 현재의 구성 요소가되는 Z 축상의 값이다. 숫자가 높을수록 소자는 소자 스택 이상, 화면의 표면에 가까운 것을 나타낸다.
는 z-index 속성에 의해 지정되지 않은 경우, 요소의 겹침 레벨은 문서 트리에서 그것의 배열에 따라 설정됩니다. 나중에 문서에서 선언 된 요소는 기본적으로 높은 스택 레벨이 있습니다.
스태킹 레벨을 계산
지정된 외에도 Z- 색인 , 소자의 적층 단계는 다수의 인자에 의해 제어된다. 요소는 다음과 같은 순서로 적층된다.
| 위치 | 기술 | CSS |
|---|---|---|
| 1 (아래) | 스태킹 컨텍스트 소자 형성 | Z- 인덱스 : <정수> |
| 이 | 음 스택 수준의 하위 요소 | Z- 인덱스 : <음의 정수> 위치 : 상대 | 절대 | 결정된 |
| 삼 | 에서는 흐름 비 인라인 하위 요소는 비 - 위치 | 디스플레이 : / *하지 인라인 * / 위치 : 정적 |
| 4 | 비 위치 지정된 부동 자식 요소 | 플로트 : 왼쪽 | 오른쪽 위치 : 정적 |
| (5) | 에서 흐름 인라인, 자식 요소를 비는-위치 | 디스플레이 : / * 인라인 * / 위치 : 정적 |
| 6 | 0의 스태킹 수준의 하위 요소 | Z- 인덱스 : 자동 | 0 위치 : 상대 | 절대 | 결정된 |
| 7 (위) | 긍정적 인 스택 수준의 하위 요소 | Z- 인덱스 : <양의 정수> 위치 : 상대 | 절대 | 결정된 |
스태킹 컨텍스트
우리가 사용하는 요소의 겹침 수준을 지정하면 Z- 인덱스의 속성을, 우리는 항상 페이지의 다른 모든 요소와 관련하여 소자의 적층 레벨을 지정하지 않습니다. 요소의 스태킹 레벨은 자사의 스택 상황과 관련있다 .
이것은 더 높은 번호 Z-인덱스 요소가 항상 필요 "위의"낮은 Z- 색인 요소하지 않은 일부 기괴한 상황으로 이어질 수 있습니다.
스태킹 컨텍스트는 다음과 같은 규칙에 의해 설명 될 수있다.
1. 문맥 적층 디폴트 루트 요소는
모든 HTML 문서에 대한 컨텍스트를 스태킹 기본값은 루트 <HTML> 요소입니다. 새로운 적층 컨텍스트가 생성되지 않는 따라서, 소자의 적층 단계는 페이지상의 모든 다른 요소와 관련하여 기본적이다.
2. Z-index 속성을 가진 새로운 스택 문맥을 구축
우리는 임의의 정수 요소의 Z- 인덱스를 설정하여 새로운 적층 컨텍스트를 확립한다. 이것은 새로운 적층 컨텍스트를 생성, 둘째 그 정수 현재 요소의 집적 레벨을 설정, 우선, 효과를 가지며,.
새로운 스택 컨텍스트는 해당 요소의 자식에 적용됩니다. 이들 적층 레벨 만 적층 컨텍스트가 아닌 루트 적층 맥락에서 지금.
아래의 예에서 .foo는 반면, 컨텍스트 1 적층에 속하는 .bar는 상황이 적층에 속한다.
3. 요소 (또는 아래) 부모 요소의 적재 수준 이상 적층 될 수 없다
부모 요소의 스택 레벨이 설정되면, 그 자식은 또한 위 또는 (친 요소의 적재 상황과 관련하여) 그 레벨 아래로 적층 될 수 없다는 것을 의미한다.
아래의 예에서, 비록 .bar이 보다 높은 Z- 인덱스가 .baz을 , 여전히 "아래의"그것을 보여줍니다. 컨텍스트 한 적층에 있기 때문이다 .bar가 위 또는 레벨 1 적층 아래 갈 수 없다.
.foo { Z- 인덱스 : 1 ; }
.bar { Z- 인덱스 : 1000 ; }
.baz { Z- 인덱스 : 2 ; }
'엄청 과거 이야기 > CSS 강좌' 카테고리의 다른 글
| [CSS]CSS로 드롭다운 메뉴를 제작하자!! 1탄 (0) | 2017.02.14 |
|---|---|
| [CSS] display! 디스플레이! 디~~스! 플레이! (0) | 2016.06.07 |
| [CSS] 위치를 지정하자! position , z-index 2-1 (0) | 2016.03.20 |
| [CSS] width, height, margin, padding 기초를 튼튼히 ! (0) | 2016.03.17 |
| [CSS] id와 class (0) | 2016.03.17 |