Class - 06
z-index নির্ধারণ করে কোন এলিমেন্টটি অন্য এলিমেন্টের উপরে বা নিচে থাকবে।
z-index এর মূল ধারণা:
-
z-index শুধুমাত্র পজিশনড এলিমেন্টের জন্য কাজ করে (যেমন: position: absolute, position: relative, position: fixed, position: sticky)।
-
z-index এর মান একটি সংখ্যা হতে পারে। সংখ্যাটি যত বড় হবে, এলিমেন্টটি তত উপরে থাকবে।
-
যদি দুটি এলিমেন্টের z-index মান একই হয়, তাহলে HTML ডকুমেন্টে যে এলিমেন্টটি পরে লেখা হয়েছে, সেটি উপরে থাকবে।
-
z-index এর মান নেগেটিভও হতে পারে। নেগেটিভ মান ব্যবহার করে এলিমেন্টকে অন্য এলিমেন্টের নিচে পাঠানো যায়।
-
z-index এর মান যত বেশি হবে, এলিমেন্টটি তত উপরে থাকবে।
-
position প্রপার্টি ব্যবহার করে ওয়েবপেজে এলিমেন্টগুলোর অবস্থান নিয়ন্ত্রণ করা যায়। এটি ওয়েবপেজে এলিমেন্টগুলোর লেআউট তৈরি করার জন্য খুবই গুরুত্বপূর্ণ। position প্রপার্টির পাঁচটি ভ্যালু রয়েছে: static, relative, absolute, fixed, sticky
-
position: static;: এটা হলো পূর্বনির্ধারিত অবস্থা। এখানে এলিমেন্টগুলো যেমন আছে তেমনই থাকবে, কোনো পরিবর্তন হবে না।
-
position: relative;: এইটা ব্যবহার করলে এলিমেন্টটা যেখানে আছে, সেখান থেকে একটু সরানো যাবে। কিন্তু অন্য এলিমেন্টগুলো এর জায়গা দখল করবে না, মানে আগে যেমন ছিল তেমনই থাকবে।
-
position: absolute;: এইটা ব্যবহার করলে এলিমেন্টটা তার কাছের পিতা-মাতার সাপেক্ষে সরানো যাবে। আর এটা জায়গা থেকে সরে যাবে, মানে অন্য এলিমেন্টগুলো এর জায়গা দখল করতে পারবে।
-
position: fixed;: এইটা ব্যবহার করলে এলিমেন্টটা ব্রাউজারের স্ক্রিনের সাপেক্ষে নির্দিষ্ট স্থানে থাকবে, স্ক্রল করলেও নড়বে না।
-
position: sticky;: এইটা ব্যবহার করলে এলিমেন্টটা স্ক্রল করার সময় একটা নির্দিষ্ট জায়গায় আটকে থাকবে, যেমন: menu bar।
হাতে কলমে বুঝার জন্য নিচের লিংকে ক্লিক করে z-index এর মান গুলো পরিবর্তন করে দেখতে পারেন। সাথে সাথে এখানে flex এর ব্যবহারও দেখানো হয়েছে ( বক্স ১,বক্স ২,বক্স ৩,বক্স ৪,বক্স ৫ এই নাম গুলোর উপরে ব্যবহার করা হয়েছে ), মান পরিবর্তন করে দেখতে পারেন।
ভুল ত্রুটি ধরিয়ে দিবেন প্লিজ—