계단식 스타일 시트를 사용하여 겹치는 요소 배치
웹 페이지 레이아웃에 CSS 배치를 사용할 때의 어려움 중 하나는 요소 중 일부가 다른 요소와 겹칠 수 있다는 것입니다. HTML의 마지막 요소를 맨 위에 표시하려면 잘 작동하지만, 디자인에서이 "계층화 된"모양을 요구하기 때문에 현재 다른 요소와 겹치지 않는 요소를 원한다면 무엇을할까요? ? 요소가 중첩되는 방식을 변경하려면 CSS의 속성을 사용해야합니다.
Word 및 PowerPoint에서 그래픽 도구를 사용하거나 Adobe Photoshop과 같은 강력한 이미지 편집기를 사용했다면 z-index와 같은 것을 볼 수 있습니다. 이러한 프로그램에서 그려진 개체를 강조 표시하고 문서의 특정 요소를 "맨 뒤로 보내기"또는 "맨 앞으로 가져 오기"옵션을 선택할 수 있습니다. Photoshop에서는 이러한 기능이 없지만 프로그램의 "레이어"창을 사용하면 요소를 캔버스에서이 레이어를 재 배열하여 배치 할 수 있습니다. 이 두 예제 모두에서 본질적으로 해당 오브젝트의 Z- 인덱스를 설정하고 있습니다.
Z- 색인이란 무엇입니까?
페이지에서 요소를 배치하기 위해 CSS 위치 지정을 사용할 때는 3 차원에서 생각해야합니다. 두 가지 표준 치수가 있습니다 : 왼쪽 / 오른쪽 및 위 / 아래. 왼쪽에서 오른쪽 인덱스는 x- 인덱스로, 맨 아래에서 하나는 y- 인덱스입니다. 이 두 가지 인덱스를 사용하여 요소를 가로 또는 세로로 배치하는 방법입니다.
웹 디자인에 관해서는 페이지의 스태킹 순서도 있습니다. 페이지의 각 요소는 다른 요소 위나 아래에 겹칠 수 있습니다. z-index 특성은 스택에서 각 요소가 어디에 있는지를 판별합니다. x- 색인과 y- 색인이 수평선과 수직선 인 경우 z- 색인은 페이지의 깊이, 본질적으로 3 차원입니다.
저는 웹 페이지의 요소를 종이 조각으로 생각 하고 웹 페이지 자체를 콜라주로 생각합니다. 내가 어디에 놓았는지는 위치에 의해 결정되며, 다른 요소들에 의해 얼마나 많은 부분이 커버되는지는 z- 인덱스이다.
Z- 색인은 양수 (예 : 100) 또는 음수 (예 : -100)의 숫자입니다. 기본 z- 색인은 0입니다. 가장 높은 z- 색인이있는 요소가 맨 위에오고, 그 다음이 가장 높고, 가장 낮은 z- 색인이됩니다. 두 요소의 Z- 인덱스 값이 같거나 정의되어 있지 않은 경우 (기본값이 0 인 경우) 브라우저는 HTML에 표시된 순서대로 레이어를 겹쳐서 표시합니다.
Z- 인덱스 사용 방법
스택에서 원하는 각 요소에 다른 Z- 인덱스 값을 부여하십시오. 예를 들어 다섯 가지 요소가있는 경우 :
- 요소 1 - z-index of -25
- 요소 2 - 82의 z- 색인
- 요소 3 - Z- 인덱스가 설정되지 않음
- 요소 4 - z- 인덱스 10
- 요소 5 - z-index of -3
다음 순서로 스택됩니다.
- 요소 2
- 요소 4
- 요소 3
- 요소 5
- 요소 1
엄청나게 다른 z- 인덱스 값을 사용하여 요소를 스택하는 것이 좋습니다. 이렇게하면 나중에 다른 요소를 페이지에 추가하면 다른 모든 요소의 Z- 인덱스 값을 조정하지 않고도 레이어를 레이어 할 수 있습니다. 예 :
- 내 최상위 요소에 대해 100
- 내 중간 요소에 0
- 내 바닥 요소에 -100
두 개의 요소에 동일한 Z- 색인 값을 부여 할 수도 있습니다. 이러한 요소가 겹쳐 있으면 HTML에 작성된 순서대로 표시되고 마지막 요소는 맨 위에 표시됩니다.
한 가지 사실은 요소가 z-index 속성을 효과적으로 사용하기 위해서는 CSS 파일에서 블록 수준 요소이거나 "block"또는 "inline-block"표시를 사용해야한다는 것입니다.
Jennifer Krynin의 원본 기사입니다. Jeremy Girard의 12/09/16에 편집 됨.