집 >웹 프론트엔드 >HTML 튜토리얼 >CSS를 사용하여 div의 Z-색인을 조작하는 방법

CSS를 사용하여 div의 Z-색인을 조작하는 방법

php中世界最好的语言원래의: 2017-11-21 18:12:573308검색

보통 z-index 이 속성을 사용해야 할 때 헷갈리기 쉽기 때문에, 오늘은 기본 속성부터 객체의 쌓임 순서, 겹치는 순서 설정까지 z-index에 대해 간략하게 살펴보겠습니다.

z-index 구문 및 구조

z-index 뒤에는 특정 숫자가 옵니다

예: p{z-index:100}

참고: z-index 값은 단위를 따르지 않습니다.

Z-index 수치가 높을수록 높아지며, 값은 정수와 양수(양수의 정수)여야 합니다.

Z-index는 absolute positioning position:absolute 속성을 사용할 때만 사용할 수 있습니다. 일반적으로 서로 다른 개체 상자가 겹쳐서 서로 다른 순서로 정렬하므로 z-index 스타일 속성이 필요합니다.

z-index 스타일 속성의 관찰을 용이하게 하기 위해 3개의 DIV 상자를 설정하고 서로 다른 css 배경 색상을 설정하고 동일한 CSS 높이와 CSS 너비를 설정했습니다. 배경색을 각각 검정, 빨강, 파랑으로 설정합니다. CSS 너비는 100px, CSS 높이는 50px

1, 사례 CSS 코드

/* www.pcs5.com z-index实例 */ 
.p {position:relative;} 
.p -1,.p -2,.p -3 
{width:100px;height:50px;position:absolute;} 
.p -1{z-index:10;background:#000;left:10px;top:10px} 
.p -2{z-index:20;background:#F00;left:20px;top:20px} 
.p -3{z-index:15;background:#00F;left:30px;top:30px}

2, html 코드 조각

<p class="p -1"></p> 
<p class="p -2"></p> 
<p class="p -3"></p>

Z-index 스타일 연습 사례 사례

사례 설명:

세 상자 모두 절대 위치 지정을 사용합니다. 속성 위치: 절대 스타일을 선택하고 동일한 높이와 너비 스타일을 설정합니다. 관찰을 용이하게 하기 위해 왼쪽과 오른쪽 속성을 사용하고 서로 다른 값을 할당하여 순서대로 만듭니다.

Div -1 상자 배경은 검은색, z-index:10

Div -2 상자 배경은 빨간색, z-index:20

Div -3 상자 배경은 파란색, z-index:15

는 괜찮습니다. 첫 번째 상자의 z-index: 10은 아래쪽에서 겹치고, 두 번째 상자의 z-index: 20은 가장 큰 값이므로 위쪽에서 겹치며, 세 번째 상자는 z-index를 설정합니다. 인덱스: 15이고 중앙에 위치합니다.

IV. z-index 요약 - TOP

실제 DIV+CSS 레이아웃에서는 절대 위치 지정 스타일이 필요하며 위치 지정을 위해 왼쪽과 오른쪽을 사용할 수 있으며 이는 서로 다른 방법을 통해 달성됩니다. Z-인덱스 값은 레이어가 겹치는 순서로 정렬됩니다.

.p _right{ float:right;width:150px;border:1px solid #00F;height:50px}

.clear{clear:both}

Z-index를 작동하는 방법은 매우 많습니다. CSS가 필요한 친구들은 저장할 수 있으며, 이 사이트의 다른 업데이트에도 계속 관심을 가져주세요.

CSS를 사용하여 div의 Z-색인을 조작하는 방법

관련 기사