분류 css

CSS z-index 속성

컨텐츠 정보

  • 조회 110 (작성일 )

본문

CSS에서`z-index` 속성으로 작업하는 방법


포지셔닝 포스트에서 z-index 속성을 사용하여 요소의 Z 축 위치를 제어 할 수 있다고 언급했습니다.


서로 겹치는 여러 요소가 있는 경우 매우 유용하며, 사용자에게 더 가까운 곳에 표시 할 요소와 그 뒤에 숨길 요소를 결정해야 합니다.


이 속성은 숫자 (10 진수 제외)를 취하고 이 숫자를 사용하여 Z 축에서 사용자에게 가장 가까운 요소를 계산합니다.


z-index 값이 높을수록 요소가 사용자에게 더 가까이 위치합니다.


표시 할 요소와 그 뒤에 배치 할 요소를 결정할 때 브라우저는 z-index 값을 계산합니다.


기본값은 특수 키워드 인 auto입니다. Z 축 순서는 자동을 사용하여 페이지에서 HTML 요소의 위치에 따라 결정됩니다. 마지막 형제가 마지막에 정의 된대로 가장 먼저 나타납니다.


기본적으로 요소에는 position 속성의 정적 값이 있습니다. 이 경우 z-index 속성은 아무런 차이가 없습니다. 작동하려면 절대, 상대적 또는 고정으로 설정해야 합니다.


예:


.my-first-div {
	position: absolute;
	top: 0;
	left: 0;
	width: 600px;
	height: 600px;
	z-index: 10;
}

.my-second-div {
	position: absolute;
	top: 0;
	left: 0;
	width: 500px;
	height: 500px;
	z-index: 20;
}


.my-second-div 클래스의 요소가 표시되고 그 뒤에 .my-first-div가 표시됩니다.


여기서는 10과 20을 사용했지만 아무 숫자 나 사용할 수 있습니다. 음수도. 연속적이지 않은 숫자를 선택하는 것이 일반적이므로 요소를 중간에 배치 할 수 있습니다. 연속 번호를 대신 사용하는 경우 위치 지정과 관련된 각 요소의 z- 색인을 다시 계산해야 합니다.