ওয়েব পৃষ্ঠা বিন্যাসের জন্য সিএসএস পজিশনিং ব্যবহার করার সময় চ্যালেঞ্জগুলির মধ্যে একটি হল যে আপনার কিছু উপাদান অন্যদের উপর আচ্ছাদিত হতে পারে। যদি আপনি HTML এ শীর্ষস্থানীয় উপাদানটি শীর্ষে রাখতে চান তবে এটি জরিমানা কাজ করে তবে আপনি যদি এমন উপাদানগুলি না চান যা না হলে অন্যেরা এমনভাবে কাজ করতে না পারে তবে ডিজাইনটি এই "স্তরযুক্ত" চেহারাটির জন্য কল করবে কেন? ? উপাদানগুলি ওভারল্যাপের উপায়গুলি পরিবর্তন করার জন্য আপনাকে CSS এর সম্পত্তি ব্যবহার করতে হবে।
আপনি যদি ওয়ার্ড এবং পাওয়ার পয়েন্টে গ্রাফিক্স সরঞ্জাম ব্যবহার করেন অথবা অ্যাডোব ফটোশপের মতো আরও শক্তিশালী ইমেজ এডিটর ব্যবহার করেন তবে সম্ভাবনা রয়েছে যে আপনি z-index এর মতো কিছু দেখছেন। এই প্রোগ্রামগুলিতে, আপনি যে বস্তুটি আঁকছেন তা হাইলাইট করতে পারেন এবং আপনার নথির কিছু উপাদানগুলি "পিছনে পাঠান" বা "সামনে আনতে" বিকল্প চয়ন করুন। ফটোশপে, আপনার কাছে এই ফাংশন নেই, তবে আপনার কাছে "লেয়ার" প্যানেটি রয়েছে এবং আপনি এই স্তরের পুনর্বিন্যাস করে ক্যানভাসে কোন উপাদানটি পড়েছেন তা আপনি পরিচালনা করতে পারেন। এই দুটি উদাহরণে, আপনি মূলত সেই বস্তুর z-index নির্ধারণ করছেন।
জেড ইনডেক্স কি?
যখন আপনি পৃষ্ঠাটির উপাদানগুলির অবস্থানগুলিতে CSS পজিশনিং ব্যবহার করছেন, তখন আপনাকে তিনটি মাত্রা মনে করতে হবে। দুটি মান মাত্রা আছে: বাম / ডান এবং শীর্ষ / নীচে। বাম থেকে ডানে সূচকটি এক্স-ইন্ডেক্স হিসাবে পরিচিত, যখন উপরের থেকে নিচের দিকে y-index হয়। এই দুটি সূচী ব্যবহার করে আপনি কিভাবে অনুভূমিকভাবে বা উল্লম্বভাবে উপাদানগুলি অবস্থান করবেন।
ওয়েব ডিজাইনের ক্ষেত্রে এটি পৃষ্ঠাটির স্ট্যাকিং অর্ডারও রয়েছে। পৃষ্ঠার প্রতিটি উপাদান উপরে বা নীচে অন্য কোন উপাদান স্তরযুক্ত করা যেতে পারে। Z- সূচক সম্পত্তি প্রতিটি উপাদান স্ট্যাক মধ্যে যেখানে নির্ধারণ করে। যদি এক্স-সূচক এবং y- সূচক অনুভূমিক এবং উল্লম্ব লাইন হয় তবে z-index পৃষ্ঠাটির গভীরতা, মূলত তৃতীয় স্তর।
একটি ওয়েব পেজে উপাদানগুলির কাগজ এবং ওয়েব পেজটিকে কোলাজ হিসাবে নিজেই মনে করুন। যেখানে আপনি রাখেন কাগজটি পজিশনিং দ্বারা নির্ধারিত হয়, এবং এটির অন্যান্য উপাদানগুলি কীভাবে আচ্ছাদিত হয় তা হল z-index।
- Z-index একটি সংখ্যা, হয় ইতিবাচক (উদাঃ 100) বা নেতিবাচক (উদাঃ -100)।
- ডিফল্ট Z- সূচক 0 হয়।
সর্বাধিক z-index সহ উপাদানটি পরবর্তী শীর্ষে এবং সর্বনিম্ন নিম্ন-সূচক অনুসারে নিম্নে রয়েছে। যদি দুটি উপাদানের একই z-index মান থাকে (অথবা এটি সংজ্ঞায়িত না হয়, মানে 0 এর ডিফল্ট মান ব্যবহার করে) ব্রাউজারটি HTML এ প্রদর্শিত ক্রম অনুসারে তাদের স্তরে রাখবে।
কিভাবে Z- সূচক ব্যবহার করবেন
আপনি আপনার স্ট্যাকের মধ্যে চান প্রতিটি উপাদান একটি ভিন্ন Z- সূচক মান দিন। উদাহরণস্বরূপ, যদি আপনার পাঁচটি পৃথক উপাদান থাকে:
- উপাদান A-z-index of -25
- উপাদান বি - Z- সূচক 82
- উপাদান সি - Z- সূচক সেট না
- উপাদান ডি - Z- সূচক 10
- উপাদান ই -3 জেড সূচক
তারা নিম্নলিখিত ক্রম স্ট্যাক হবে:
- উপাদান বি
- উপাদান ডি
- উপাদান সি
- উপাদান ই
- উপাদান এ
আপনার উপাদানগুলি স্ট্যাক করার জন্য এটি বেশিরভাগ আলাদা Z-index মান ব্যবহার করার পরামর্শ দেওয়া হয়। এইভাবে, আপনি পরে পৃষ্ঠাটিতে আরও উপাদান যুক্ত করলে, আপনার সমস্ত অন্যান্য উপাদানগুলির z-index মানগুলি সামঞ্জস্য না করেই তাদের মধ্যে স্তরগুলি রেখে দেওয়ার জায়গা রয়েছে। উদাহরণ স্বরূপ:
- আপনার শীর্ষ সবচেয়ে উপাদান জন্য 100
- আপনার মধ্যম উপাদান জন্য 0
- আপনার নীচের উপাদান জন্য -100
আপনি দুটি উপাদান একই Z- সূচক মান দিতে পারেন। যদি এই উপাদানগুলিকে স্ট্যাক করা হয়, তবে তারা শেষের উপাদানটির সাথে HTML এ লিখিত ক্রম অনুসারে প্রদর্শন করবে।
এক নোট: কোনও উপাদানটিকে z-index সম্পত্তি কার্যকরভাবে কার্যকর করার জন্য, এটি একটি ব্লক স্তর উপাদান হতে হবে বা আপনার CSS ফাইলে "ব্লক" বা "ইনলাইন-ব্লক" প্রদর্শন ব্যবহার করতে হবে।
