이 기사를 읽은 결과 CSS로 겹치는 div를 만들 수 있습니다. 이를 위해 먼저 ' 위치 ' 그리고 ' Z-인덱스 ' 속성.
시작하자!
CSS '위치' 속성
HTML에서 ' 위치 ' 재산. 웹 페이지에서 요소의 최종 위치는 오른쪽, 왼쪽, 위쪽, 아래쪽 및 z-색인 속성의 조합에 의해 결정됩니다.
통사론
위치 속성의 구문은 다음과 같습니다.
위치 : 값
'대신에 값 '를 사용하면 절대, 상대, 고정, 고정 등 요소의 위치를 다르게 설정할 수 있습니다.
CSS 'z-색인' 속성
' Z-인덱스 '속성은 요소의 스택 순서를 설정하는 데 사용됩니다. z-index 값이 더 큰 요소가 다른 요소 앞에 배치됩니다.
통사론
z-index 속성의 구문은 다음과 같습니다.
Z-인덱스 : 자동 |번호위의 구문에서 ' 자동 '는 상위 요소에 따라 순서를 설정하는 데 사용되며 수동 시퀀스의 경우 ' 숫자 '는 z-index 속성 값으로 설정됩니다.
이제 CSS를 사용하여 겹치는 div를 만드는 실제 예제로 이동해 보겠습니다.
예 1: 두 번째 div를 첫 번째 div와 겹침
HTML 섹션에서 두 개의 div를 만들고 다른 클래스 이름을 ' div1 ' 그리고 ' div2 '.
HTML
< 신체 >< div 수업 = 'div1' >< / div >
< div 수업 = 'div2' >< / div >
< / 신체 >
이제 CSS로 이동하고 주어진 지침을 따르십시오.
- position 속성의 값을 ' 순수한 ” 장소 div1에 대해 정확히 원하는 장소.
- div1의 높이와 너비를 ' 250픽셀 ' 그리고 ' 300픽셀 '.
- z-index의 값은 ' 1 '.
- div1의 배경색을 ' RGB(4, 3, 75) '.
CSS
.div1 {위치 : 순수한 ;
키 : 250픽셀 ;
너비 : 300픽셀 ;
Z-인덱스 : 1 ;
배경 : RGB ( 4 , 삼 , 75 ) ;
}
산출
첫 번째 div가 성공적으로 배치되었습니다. 이제 두 번째 div로 이동합니다.
div2를 겹치려면 다음 지침을 따르세요.
- div2의 position 속성 값, width, height 값을 “ div1 '.
- z-index 값을 ' 둘 '를 사용하여 첫 번째 div 앞에 배치합니다.
- div2의 다른 배경색을 ' RGB(0, 204, 255) '.
- div2의 여백을 ' 50픽셀 '를 margin-top 및 margin-left 값으로 사용합니다.
- div2의 불투명도를 ' 0.7 '.
CSS
.div2 {위치 : 순수한 ;
너비 : 300픽셀 ;
키 : 250픽셀 ;
Z-인덱스 : 삼 ;
배경 : RGB ( 0 , 204 , 255 ) ;
여유 : 50픽셀 ;
불투명 : 0.7 ;
}
산출
Div2가 div1과 성공적으로 겹칩니다.
div1을 div 2 위에 설정하려면 z-index 값을 변경하기만 하면 됩니다. 이에 대한 예를 살펴보겠습니다.
예 2: 첫 번째 div를 두 번째 div와 겹침
이 예에서는 두 div의 z-인덱스 값을 변경합니다. '에서 .div1 ' CSS 파일의 '클래스에서 ' 값을 설정하십시오. Z-인덱스 ' 속성 ' 둘 ':
Z-인덱스 : 둘 ;그 후 '에서 .div2 ' 클래스에서 '의 값을 설정합니다. Z-인덱스 ' 속성 ' 1 ':
Z-인덱스 : 1 ;결과적으로 첫 번째 div는 두 번째 div 앞에 배치됩니다.
CSS로 두 개의 겹치는 div를 만드는 가장 쉬운 방법을 컴파일했습니다.
결론
' 위치 ' 그리고 ' Z-인덱스 ” 속성은 CSS에서 겹치는 div를 만드는 데 사용됩니다. 기본적으로 z-index의 값은 1이며, 이는 새로 생성된 div가 기존 div 앞에 배치됨을 나타냅니다. 그러나 요구 사항에 따라 임의의 값을 지정하여 겹치는 순서를 조정할 수 있습니다. 이 기사에서는 CSS를 사용하여 겹치는 Div를 만드는 방법을 제공했습니다.