CSS Z-Index 속성 개발자를 사용하여 요소를 서로 스택할 수 있습니다. Z-색인은 양수 또는 음수 값을 가질 수 있습니다.
참고 − 겹치는 요소에 z-index가 지정되지 않은 경우 문서에서 마지막으로 언급된 해당 요소가 표시됩니다.
예시
z-색인 속성의 예를 살펴보겠습니다 −
<!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 속성의 또 다른 예를 봅시다 -
<!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> 출력
다음은 위의 코드에 대한 출력입니다 -
