সিএসএস: গুগল ম্যাপ (Google Maps)

## আগামী ও গ্রামীণফোন এর সহযোগিতায় অনূদিত ## আমি তোমাকে CSS এর অবস্থান এবং z-ইনডেক্স এর উদাহরণ দিবঃ গুগল ম্যাপ। সম্ভবত, তুমি গুগল ম্যাপ বা এই ধরনের অনলাইন ম্যাপিং সার্ভিস ব্যবহার করেছো যা দিয়ে তুমি অনেক স্থান খুঁজে পাও। আর এই জিনিসগুলো অনেক মজার। আমরা ঘুরে বেড়াতে পারি আরও কাছে এনে দেখতে পারি, এবং আরও দূরে নিয়ে দেখতে পারি, এবং আমরা বিভিন্ন জিনিস খুঁজতেও পারি। আমি যেহেতু এখন বার্সেলোনাতে আছি, আমি সাগ্রাদা ফ্যামিলিয়া খুঁজবো এটা একটা সুন্দর গির্জা... এটাই আসলে HTML, CSS এবং জাভাস্ক্রিপ্ট। এখানে যে জেড-ইনডেক্স গুলো রয়েছে সেগুলো প্রথমে দেখো। আমরা এই যে সব ভিন্ন ভিন্ন উপাদান দেখছি, এগুলোকে সঠিক অবস্থানে একটার উপর আরেকটা রাখা হয়েছে CSS ব্যবহার করে। এবং তারা একটা নির্দিষ্ট পদ্ধতিতে জেড-ইনডেক্স ব্যবহার করছে যেন ক্রম একেবারে সঠিক থাকে। আমি ক্রোম কনসল ব্যবহার করে তোমাকে আরও কিছু জিনিস দেখাবো। কোণের দিকে এইযে ছোট ম্যাপটি আছে এর অবস্থানঃ একদম সঠিক; নিচেঃ ০ পিএক্স; বামেঃ ০পিএক্স; এবং জেড-ইনডেক্স হচ্ছে ১। সুতরাং এর অবস্থান হবে জেড-ইনডেক্স ০ এর অবস্থান থেকে একটু উপরে। এই যে ভাসমান হভারকার্ড জিনিসটি রয়েছে এবং এর অনেকগুলো অপশন আছে। এর অবস্থানঃ ফিক্সড এবং জেড-ইনডেক্স ১০ সুতরাং এটা অনেক জিনিসের উপরেই থাকবে। জুম বাটন এর জেড-ইনডেক্স হচ্ছে ২, তার মানে এটা ঐ ভাসমান হভারকার্ড এর নিচে থাকবে। এটাকে এখানে সরিয়ে এনে দেখি কী হয়। দেখেছো? হভারকার্ডটি জুম এর উপরে দেখাচ্ছে, কারন এর জেড-ইনডেক্স হচ্ছে ৪ এবং জুম এর জেড-ইনডেক্স ২। তাহলে তুমি দেখতে পাচ্ছো, গুগল ম্যাপ অনেক CSS অবস্থান এবং জেড-ইনডেক্স ব্যবহার করে যেন ম্যাপের সব স্থান সাজানো ও উপরের বস্তুটির নিয়ন্ত্রণ বেশি থাকে। এটি আরও অন্যান্য অনেক CSS এবং জাভাস্ক্রিপ্ট ব্যবহার করে, এটা পরিষ্কার যে এখন তুমি বুঝতে শুরু করেছো কীভাবে ওয়েবসাইটগুলো তৈরি হয় আমরা এতক্ষণ যা দেখলাম এর থেকে বেশি কিছু না। এটাই হচ্ছে CSS এর ক্ষমতা। ## আগামী ও গ্রামীণফোন এর সহযোগিতায় অনূদিত ##