CSS Z-Index প্রোপার্টি ব্যবহার করে ডেভেলপাররা এলিমেন্টগুলো একে অপরের উপরে স্ট্যাক করতে পারেন। Z-Index পজিটিভ বা নেগেটিভ মান 가질 수 있습니다।
নোট: যদি ওভারল্যাপ করার এলিমেন্টগুলোতে z-index স্পেসিফাইড না থাকে তবে ডকুমেন্টে সবচেয়ে শেষে উল্লিখিত এলিমেন্টটি দেখাবে।
উদাহরণ
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>
আউটপুট
উপরের কোডের আউটপুট:
