CSS Z-সূচক

আপনি যখন CSS দিয়ে আপনার লেআউট ডিজাইন করছেন, আপনি প্রায়শই উপাদানগুলিকে উপরে/নীচে বা বাম/ডানে অবস্থান করবেন। z-index আমাদেরকে Z-অক্ষে একটি 3য় মাত্রায় উপাদান সরাতে দেয়, একটি স্ট্যাকিং প্রভাব (একে অপরের উপরে)।

z-index সম্পত্তি হয় auto নেয় কীওয়ার্ড বা একটি পূর্ণসংখ্যা। এই সব বৈধ ঘোষণা:

z-index: auto;
z-index: -1;
z-index: 9999;

দ্রষ্টব্য :z-সূচক প্রয়োগ করার জন্য, আমাদের position ব্যবহার করে উপাদানগুলিকেও অবস্থান করতে হবে সম্পত্তি হয় আপেক্ষিক, পরম বা স্থির। যদি কোনো অবস্থান নির্দিষ্ট করা না থাকে তাহলে এটি z-index: auto প্রয়োগ করার মতই হবে এবং কোন স্ট্যাকিং প্রসঙ্গ প্রয়োগ করা হবে না।

এটি মাথায় রেখে, আসুন একটি উদাহরণ দেখি।

আসুন কিছু গিনিপিগের অবস্থান করি

আপনি কোডপেনে এই উদাহরণটি পরীক্ষা করতে পারেন। এটি নিয়ে খেলুন এবং আমার সাথে কোড করুন!

আমরা দুটি গিনিপিগ বা Cuys রাখব (যা আরো সুন্দর শোনাচ্ছে) ধরা যাক আমরা গ্রীষ্মকালে আছি তাই বাইরে 90+ ডিগ্রি। Cuy # 1 একটি হ্রদের ভিতরে স্থাপন করা হবে, তার একটি ভাল সময় হবে. Cuy#2 খুব অলস তাই আমাদের তাকে কিছু কফি দিতে হবে তাকে জাগানোর জন্য! তাই আমরা কফির সাথে আমাদের Cuy#2 স্ট্যাক করব যাতে সে এটি পান করতে পারে।

কোনো পজিশনিং বা CSS ছাড়াই আমাদের ছবিগুলো কমবেশি এই রকম দেখায়:

ধারণাটি হ্রদ এবং কফির উপরে কিছু চিত্র স্থাপন করার জন্য z-সূচক ব্যবহার করে একটি স্ট্যাকিং প্রসঙ্গ তৈরি করা।

81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷

গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় কাটিয়েছে।

এছাড়াও, মনে রাখবেন জেড-ইনডেক্স প্রয়োগ করার জন্য আমাদের উপাদানগুলিতে অবস্থান যোগ করতে হবে। আসুন এগিয়ে যাই এবং আমাদের Cuy#1:

img.cuy.one {
  position: absolute;
}

আমাদের বন্ধু কোথায়? আসুন এগিয়ে যাই এবং একটি উচ্চতর স্ট্যাকিং প্রসঙ্গ যোগ করি যাতে এটি লেকের উপরে থাকে:

img.cuy.one {
  position: absolute;
  z-index: 1;
}

হ্যাঁ! আমাদের কুই লেকের উপরে। লেকের ভিতরে এটি স্থাপন করার জন্য আমাদের এখন কিছু প্যাডিং যোগ করতে হবে, কিন্তু আমি আপনাকে এটির সাথে খেলতে দেব।

এখন আমরা জানি কিভাবে z-index ব্যবহার করে স্ট্যাকিং প্রসঙ্গ তৈরি করতে হয় , আমরা আমাদের দ্বিতীয় প্রাণীটি খুব সহজে রাখতে পারি:

img.cuy.two {
  position: absolute;
  width: 160px;
  padding: 100px;
  z-index: 1;
}

আবার প্যাডিং হবে ছবির সঠিক অবস্থানের জন্য, এবং প্রস্থ শুধুমাত্র আমাদের ছোট বন্ধুর আকার নির্দিষ্ট করতে ব্যবহার করা হয়। এর সাথে, আমরা আমাদের কাজ শেষ করেছি এবং সবাই খুশি এবং সতেজ বোধ করে:

উপসংহার

z-index এর সাথে খেলা আকর্ষণীয় লেআউট ধারণা জন্য পথ করে তোলে. কোডপেনে আমি পপ চ্যাট ডিজাইনের একটি দ্বিতীয় উদাহরণও দিয়েছি এবং সবকিছুর উপরে z-সূচী দিয়েছি। এটি পরীক্ষা করে দেখুন!

ভুলবেন না যে আপনাকে অবশ্যই সবসময় উপাদানের অবস্থান করতে হবে বা আপনার z-সূচক কাজ করবে না। পজিশনিং সরিয়ে কোডপেনের চারপাশে খেলার চেষ্টা করুন এবং নিজের জন্য দেখুন।

আরেকটি সুপারিশ হল যে আপনাকে অবশ্যই ভাইবোন উপাদানগুলিতে z-সূচক প্রয়োগ করতে হবে। আমাদের উদাহরণগুলিতে আমাদের ছবিগুলি নেস্ট করা হয়নি এবং ভাইবোন ছিল (পাশাপাশি)। আপনার যদি গভীরভাবে নেস্টেড উপাদান থাকে, তাহলে z-index আশানুরূপ কাজ নাও করতে পারে . তাই এটা মাথায় রাখুন।