সিএসএস জেড-ইনডেক্স প্রপার্টি ডেভেলপার ব্যবহার করে একে অপরের সাথে উপাদান স্ট্যাক করতে পারে। Z-সূচকের একটি ইতিবাচক বা একটি নেতিবাচক মান থাকতে পারে৷
নোট৷ − যদি ওভারল্যাপ করা উপাদানগুলিতে z-সূচক নির্দিষ্ট না থাকে তবে সেই উপাদানটি দেখাবে যা নথিতে সর্বশেষ উল্লেখ করা হয়েছে৷
উদাহরণ
আসুন z-index সম্পত্তির একটি উদাহরণ দেখি -
<!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> আউটপুট
উপরের কোডের আউটপুট −
নিচে দেওয়া হল
