การใช้ CSS Z-Index ผู้พัฒนาคุณสมบัติสามารถซ้อนองค์ประกอบเข้าด้วยกันได้ ดัชนี Z สามารถมีค่าบวกหรือค่าลบได้
หมายเหตุ − หากองค์ประกอบที่คาบเกี่ยวกันไม่ได้ระบุดัชนี z องค์ประกอบนั้นจะแสดงขึ้นที่กล่าวถึงสุดท้ายในเอกสาร
ตัวอย่าง
มาดูตัวอย่างคุณสมบัติดัชนี 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 กัน −
<!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> ผลลัพธ์
ต่อไปนี้เป็นผลลัพธ์สำหรับโค้ดด้านบน -
