CSS를 사용하여 Z 인덱스가 있는 요소 겹치기
- WBOY앞으로
- 2023-09-01 10:37:01581검색
CSS Z-Index 속성을 사용하여 개발자는 요소를 함께 쌓을 수 있습니다. Z-Index는 양수 또는 음수 값을 가질 수 있습니다.
Note - 겹치는 요소가 Z-색인을 지정하지 않으면 해당 요소는 문서의 마지막 언급을 표시합니다.
Example
z-index 속성의 예를 살펴보겠습니다 -
强> Live Demo
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
div{
margin: auto;
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
}
div:first-child {
background-color: orange;
width: 270px;
height: 120px;
z-index: -2;
}
div:last-child {
width: 250px;
height: 100px;
z-index: -1;
background-color: turquoise;
}
</style>
</head>
<body>
<div></div>
<p>Fortran was originally developed by a team at IBM in 1957 for scientific calculations...................</p>
<div>
</div>
</body>
</html>출력
위 코드의 출력은 다음과 같습니다.
예제
z-index 속성의 또 다른 예를 살펴보겠습니다.
Live Demo
<!DOCTYPE html>
<html>
<head>
<style>
p {
background: url("https://www.tutorialspoint.com/tensorflow/images/tensorflow-mini-logo.jpg");
background-origin: content-box;
background-repeat: no-repeat;
background-size: cover;
box-shadow: 0 0 3px black;
padding: 20px;
background-origin: border-box;
}
</style>
</head>
<h2>Demo</h2>
<body>
<p>This is demo text. This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text. This is demo text.
This is demo text.</p>
</body>
</html>출력
다음은 출력입니다. 위 코드 출력-
위 내용은 CSS를 사용하여 Z 인덱스가 있는 요소 겹치기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 tutorialspoint.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제