웹 페이지 레이아웃에 CSS 배치를 사용할 때의 어려움 중 하나는 요소 중 일부가 다른 요소와 겹칠 수 있다는 것입니다. HTML의 마지막 요소를 맨 위에 표시하려면 잘 작동하지만, 디자인에서이 "계층화 된"모양을 요구하기 때문에 현재 다른 요소와 겹치지 않는 요소를 원한다면 무엇을할까요? ? 요소가 중첩되는 방식을 변경하려면 CSS의 속성을 사용해야합니다.
Word 및 PowerPoint에서 그래픽 도구를 사용하거나 Adobe Photoshop과 같은보다 강력한 이미지 편집기를 사용했다면 z- 인덱스와 같은 것을 볼 수 있습니다. 이러한 프로그램에서 그려진 개체를 강조 표시하고 문서의 특정 요소를 "맨 뒤로 보내기"또는 "맨 앞으로 가져 오기"옵션을 선택할 수 있습니다. 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- 인덱스 값을 부여하십시오. 예를 들어 다섯 가지 요소가있는 경우 :
- 요소 A - z의 인덱스 -25
- 요소 B - 82의 Z- 색인
- 요소 C - Z- 색인이 설정되지 않음
- 요소 D - z- 색인 10
- 요소 E - Z- 색인 -3
다음 순서로 스택됩니다.
- 요소 B
- 요소 D
- 요소 C
- 요소 E
- 요소 A
엄청나게 다른 Z- 인덱스 값을 사용하여 요소를 스택하는 것이 좋습니다. 이렇게하면 나중에 다른 요소를 페이지에 추가하면 다른 모든 요소의 Z- 인덱스 값을 조정하지 않고도 레이어를 레이어 할 수 있습니다. 예 :
- 맨 위에있는 요소에 대해 100
- 중간 요소에 대해 0
- 바닥 요소에 대해 -100
두 개의 요소에 동일한 Z- 색인 값을 부여 할 수도 있습니다. 이러한 요소가 겹쳐 있으면 HTML에 작성된 순서대로 표시되고 마지막 요소는 맨 위에 표시됩니다.
참고 : 요소가 z- 색인 속성을 효과적으로 사용하려면 CSS 파일에서 블록 수준 요소이거나 "block"또는 "inline-block"표시를 사용해야합니다.
