Z-Index কি?
:
z-index একটি CSS প্রোপার্টি , যা HTML এলিমেন্টগুলোর overlapping কন্ট্রোল করে, অর্থাৎ একটির উপর আরেকটি কিভাবে সিরিয়ালি অবস্থান করবে তাই নির্ধারণ করে।
Z-Index-এর ব্যাখ্যা
:
ত্রিমাত্রিক স্থানাঙ্ক ব্যবস্থায় x অক্ষ, y অক্ষ এবং z অক্ষ সম্পর্কে আমরা অনেকেই জানি। এই z অক্ষ থেকেই z-index-কে ব্যাখ্যা করা যায়।
-
x-axis (মনিটরের দৈর্ঘ বরাবর)
:
মনিটরের বাম থেকে ডান দিকেআনুভুমিক রেখাকে আমরা স্থানাঙ্কের x অক্ষের সাথে তুলনা করতে পারি।
-
y-axis (মনিটরের প্রস্থ বরাবর)
:
মনিটরের নিচ থেকে উওপরের দিকেউলম্ব রেখাকে আমরা স্থানাঙ্কের y অক্ষের সাথে তুলনা করতে পারি।
-
z-axis (ইউজারের মুখমণ্ডলের দিকে)
:
স্ক্রিন বা মনিটর থেকে উজারের মুখের দিকে (পজিটিভ মান) এবং বিপরীত দিকে (নেগেটিভ মান
) বিবেচনা করে এটিকে ত্রিমাত্রিক স্থানাঙ্ক ব্যবস্থায় z অক্ষের সাথে তুলনা করতে পারি।
z-এর মান কিভাবে কাজ করে:
- যে এলিমেন্টের z-এর মান বেশি, সেই এলিমেন্টটি ইউজারের মুখমণ্ডলের দিকে বেশি সরে থাকবে।
- অর্থাৎ ইউজার সেটিকে আগে দেখতে পাবে।
উদাহরণ:
z-index: 1
থেকেz-index: 2
যুক্ত এলিমেন্টকে ইউজার আগে দেখতে পাবে।- আবার
z-index: -2
থেকেz-index: -1
যুক্ত এলিমেন্টকেও ইউজার আগে দেখতে পাবে। z-index: 0
হচ্ছে ডিফল্ট ভ্যালু।
z-index-এর রিকয়ার্মেন্ট
:
- z-index
position property
যুক্ত এলিমেন্টে কাজ করে।
তাই কোন এলিমেন্টে z-index ইউজ করতে হলে তার পূর্বে নিচের যেকোনো একটি পজিশন প্রোপার্টি ইউজ করতে হবে।position: relative;
position: absolute;
position: fixed;
position: sticky;
রিয়েল লাইফ উদাহরণ
:
- আপনি যদি একটি ব্যাকগ্রাউন্ড ইমেজ ওভারলে যুক্ত হিরো সেকশন তৈরি করতে চান, তাহলে কালার ওভারলে-কে এমনভাবে রাখতে হবে যেন এটি ব্যাকগ্রাউন্ড ইমেজ
ও কন্টেন্ট
এর মাঝখানে অবস্থান করে।
অন্য একদিন এই কালার ওভারলে নিয়ে বিস্তারিত লেখার চেষ্টা করবো ।
সবার জন্য শুভ কামনা । ধন্যবাদ!
Happy Learning