ক্যাসকেডিং স্টাইল শীটগুলির সাথে স্থিরকরণের উপাদানগুলির অবস্থান
ওয়েব পৃষ্ঠার লেআউটের জন্য সিএসএস পজিশনিং ব্যবহার করার সময় একটি চ্যালেঞ্জ হল যে আপনার কিছু উপাদান অন্যান্যদের ওভারল্যাপ করতে পারে। এইচটিএমএল-এর শেষ উপাদানটি যদি আপনি উপরের দিকে চান তাহলে এটি ভাল কাজ করে, কিন্তু যদি আপনি না করেন তবে কি করবেন যদি আপনি এমন কিছু উপাদান থাকতে চান যা বর্তমানে অন্যকে ওভারল্যাপ করতে না পারে কারণ এই "স্তরযুক্ত" বর্ণনার জন্য ডিজাইন কল করে ? উপাদানের উপাদানে পরিবর্তন করার জন্য আপনাকে CSS এর সম্পত্তি ব্যবহার করতে হবে।
যদি আপনি Word এবং PowerPoint বা অ্যাডোব ফটোশপ মত আরও শক্তিশালী ইমেজ এডিটরে একটি গ্রাফিক্স সরঞ্জাম ব্যবহার করেন, তাহলে আপনি জাড ইনডেক্সের মত কিছু দেখতে পেয়েছেন। এই প্রোগ্রামগুলিতে, আপনি যে অবজেক্ট (গুলি) টানা করেছেন সেটি হাইলাইট করতে পারেন, এবং আপনার দস্তাবেজের নির্দিষ্ট উপাদানগুলির "সামনে পাঠান" বা "সামনে আনুন" বিকল্পটি চয়ন করুন। ফটোশপে, আপনার এই ফাংশন নেই, কিন্তু প্রোগ্রামটির "লেয়ার" প্যান আছে এবং আপনি এই লেয়ারগুলিকে পুনরায় সাজানো দ্বারা একটি উপাদান ক্যানভাসে পড়ে যেখানে সাজান। এই উভয় উদাহরণে, আপনি মূলত ঐ বস্তুর z- সূচী নির্ধারণ করা হয়।
জেড-ইনডেক্স কি?
যখন আপনি পৃষ্ঠার উপাদানগুলির অবস্থান নির্ধারণ করতে CSS পজিশনিং ব্যবহার করছেন, তখন আপনাকে তিনটি মাত্রা মনে করতে হবে। দুটি মান মাত্রা আছে: বাম / ডান এবং উপরে / নীচে বাম দিকের ডান প্রজেক্টকে এক্স-ইনডেক্স হিসাবে বলা হয়, যখন উপরেরটি থেকে নীচে y- সূচক হয় এই দুটি সূচী ব্যবহার করে আপনি অনুভূমিক বা উল্লম্বভাবে উপাদানগুলিকে অবস্থান করবেন।
যখন ওয়েব ডিজাইন আসে, পৃষ্ঠার স্ট্যাকিং অর্ডার রয়েছে পৃষ্ঠার প্রতিটি উপাদান অন্য যেকোনো উপাদানের উপরে বা নীচে স্তরযুক্ত হতে পারে। Z- সূচক সম্পত্তি নির্ধারণ করে প্রতিটি স্ট্যাকের প্রতিটি স্তরে কোথায়। যদি x- সূচক এবং y- সূচকটি অনুভূমিক এবং উল্লম্ব লাইন হয়, তবে z- সূচকটি পৃষ্ঠার গভীরতা, মূলত তিনটি মাত্রা।
আমি কাগজগুলির টুকরো হিসাবে ওয়েবপৃষ্ঠাতে উপাদানগুলি, এবং একটি কোলাজ হিসাবে ওয়েব পৃষ্ঠা নিজেই মনে করতে পছন্দ করি। কোথায় আমি রাখা কাগজ স্থিতি দ্বারা নির্ধারিত হয়, এবং এটি অন্যান্য উপাদান দ্বারা আচ্ছাদিত কত z- সূচক হয়।
Z- সূচক একটি সংখ্যা হয়, ইতিবাচক হয় (যেমন 100) বা নেতিবাচক (যেমন -100)। ডিফল্ট z- সূচক 0 হয়। সর্বোচ্চ z- সূচক সঙ্গে উপাদান উপরে, পরবর্তী সর্বোচ্চ দ্বারা অনুসরণ করা হয় এবং তাই সর্বনিম্ন z- সূচক থেকে নিচে যদি দুইটি উপাদানের একই z- সূচক মান থাকে (বা এটি সংজ্ঞায়িত করা হয় না, তবে এর মানে হল 0 এর ডিফল্ট মান ব্যবহার করা হয়) ব্রাউজার এইচটিএমএল-এ প্রদর্শিত ক্রমানুসারে তাদের স্তম্ভ করবে।
কিভাবে z- সূচক ব্যবহার করবেন
আপনার স্ট্যাকের একটি পৃথক Z- সূচক মানটি আপনি চান প্রতিটি উপাদান দিন উদাহরণস্বরূপ, যদি আমার পাঁচটি ভিন্ন উপাদান থাকে:
- উপাদান 1 - Z- সূচক -25
- উপাদান 2 - Z- সূচকের 82
- উপাদান 3 - z- সূচক সেট না
- উপাদান 4 - 10 এর z- সূচক
- উপাদান 5 - -3 এর z- সূচক
তারা নিম্নলিখিত আদেশ স্ট্যাক হবে:
- উপাদান 2
- উপাদান 4
- উপাদান 3
- উপাদান 5
- উপাদান 1
আমি আপনার উপাদানগুলি স্ট্যাক করার জন্য বিরাট বিভিন্ন Z- সূচক মান ব্যবহার করার পরামর্শ দিচ্ছি। এই ভাবে, যদি আপনি পৃষ্ঠায় আরও উপাদান যোগ করেন, তাহলে আপনার কাছে অন্যান্য সমস্ত উপাদানের z- সূচক মান সমন্বয় ছাড়া তাদের স্তরে রাখার জায়গা আছে। উদাহরণ স্বরূপ:
- আমার শীর্ষ সর্বোচ্চ উপাদান জন্য 100
- আমার মাঝের উপাদান জন্য 0
- আমার নীচে উপাদান জন্য -100
আপনি দুটি উপাদান একই z- সূচক মান দিতে পারেন। যদি এই উপাদানগুলিকে স্ট্যাক করা হয়, তবে তারা এইচটিএমএল-এ লেখা সমস্ত ক্রম অনুযায়ী শীর্ষে থাকবে।
একটি নোট, একটি উপাদান Z- সূচক সম্পত্তি কার্যকরভাবে ব্যবহার করার জন্য, এটি একটি ব্লক স্তর উপাদান হতে হবে বা আপনার ব্লগের "ব্লক" বা "ইনলাইন-ব্লক" প্রদর্শন আপনার CSS ফাইলে ব্যবহার করা উচিত।
জনিফার ক্রাইনিনের মূল রচনা 12/09/16 তারিখে জেরেমি Girard দ্বারা সম্পাদিত