Z-Index কি? এটি যেভাবে কাজ করে।

Z-Index কি? :dart::

z-index একটি CSS প্রোপার্টি :art:, যা HTML এলিমেন্টগুলোর overlapping কন্ট্রোল করে, অর্থাৎ একটির উপর আরেকটি কিভাবে সিরিয়ালি অবস্থান করবে তাই নির্ধারণ করে।

Z-Index-এর ব্যাখ্যা :books::

:triangular_ruler: ত্রিমাত্রিক স্থানাঙ্ক ব্যবস্থায় x অক্ষ, y অক্ষ এবং z অক্ষ সম্পর্কে আমরা অনেকেই জানি। এই z অক্ষ থেকেই z-index-কে ব্যাখ্যা করা যায়।

  1. x-axis (মনিটরের দৈর্ঘ বরাবর) :arrow_right::
    মনিটরের বাম থেকে ডান দিকে :arrow_right: আনুভুমিক রেখাকে আমরা স্থানাঙ্কের x অক্ষের সাথে তুলনা করতে পারি।

  2. y-axis (মনিটরের প্রস্থ বরাবর) :arrow_up::arrow_down::
    মনিটরের নিচ থেকে উওপরের দিকে :arrow_right: উলম্ব রেখাকে আমরা স্থানাঙ্কের y অক্ষের সাথে তুলনা করতে পারি।

  3. z-axis (ইউজারের মুখমণ্ডলের দিকে) :technologist::
    স্ক্রিন বা মনিটর থেকে উজারের মুখের দিকে (পজিটিভ মান :heavy_plus_sign:) এবং বিপরীত দিকে (নেগেটিভ মান :heavy_minus_sign:) বিবেচনা করে এটিকে ত্রিমাত্রিক স্থানাঙ্ক ব্যবস্থায় z অক্ষের সাথে তুলনা করতে পারি।

    z-এর মান কিভাবে কাজ করে:

    • যে এলিমেন্টের z-এর মান বেশি, সেই এলিমেন্টটি ইউজারের মুখমণ্ডলের দিকে বেশি সরে থাকবে।
    • অর্থাৎ ইউজার সেটিকে আগে দেখতে পাবে।

    উদাহরণ:

    • z-index: 1 থেকে z-index: 2 যুক্ত এলিমেন্টকে ইউজার আগে দেখতে পাবে।
    • আবার z-index: -2 থেকে z-index: -1 যুক্ত এলিমেন্টকেও ইউজার আগে দেখতে পাবে।
    • z-index: 0 হচ্ছে ডিফল্ট ভ্যালু।

z-index-এর রিকয়ার্মেন্ট :hammer_and_wrench::

  1. z-index position property যুক্ত এলিমেন্টে কাজ করে :jigsaw:
    তাই কোন এলিমেন্টে z-index ইউজ করতে হলে তার পূর্বে নিচের যেকোনো একটি পজিশন প্রোপার্টি ইউজ করতে হবে।
    • position: relative; :arrows_counterclockwise:
    • position: absolute; :round_pushpin:
    • position: fixed; :pushpin:
    • position: sticky; :safety_pin:

রিয়েল লাইফ উদাহরণ :earth_africa::

  • আপনি যদি একটি ব্যাকগ্রাউন্ড ইমেজ ওভারলে যুক্ত হিরো সেকশন তৈরি করতে চান, তাহলে কালার ওভারলে-কে এমনভাবে রাখতে হবে যেন এটি ব্যাকগ্রাউন্ড ইমেজ :framed_picture: ও কন্টেন্ট :writing_hand: এর মাঝখানে অবস্থান করে।

অন্য একদিন এই কালার ওভারলে নিয়ে বিস্তারিত লেখার চেষ্টা করবো :writing_hand:
সবার জন্য শুভ কামনা । ধন্যবাদ!

Happy Learning :brown_heart:

15 Likes

thanks for sharing Nayemur Rahman vai

1 Like

Also Thank You Brother :sunflower:

1 Like

thank you baiya notun kisu janlam.

1 Like

ওয়েব পেজ ডিজাইনে z-index অনেক অনেক বেশি ব্যবহৃত হয়। ভালো জিনিস পড়েছেন। ধন্যবাদ :sunflower:

ভাই একদম ফকফকা উদাহরণ! এর থেকে বেশি ভালো উদাহরণ খুব কমই পাওয়া যাবে। জাজাকাল্লাহ। ভাইজান

1 Like

চেষ্টা করি সময় নিয়ে ভালো করে লিখার। কিন্তু পরে দেখলে মনে হয় আরো ভালো করার প্রয়োজন ছিলো। অনেক অনেক ধন্যবাদ এতো সুন্দর একটি ফিডব্যাক দেওয়ার জন্য ! :sunflower:

1 Like

যারা মাত্র শুরু করছে তাদের জন্য এসবই দরকার, যখন বুঝে যাবে এডভান্স শেখার মতো হাজারো জিনিস তো আছে, এভাবে বাচ্চার মতো কজন লিখে শেখায়। আল্লাহ আপনার বোঝানোর ধরণ আরো বাড়িয়ে দিক।

2 Likes

জাযাকাল্লাহ ভাই z-index সম্পর্কে বিস্তারিত জানানোর জন্য,:smiling_face_with_three_hearts:

1 Like

জ্বী, যারা মাত্র শুরু করেছে তাদের জন্যই লিখার চেষ্টা করি।

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

কিন্তু বিগিনারদের ক্ষেত্রে সেটি হয় না। এটা সত্য যে বিগিনাররা ব্লগ পোস্ট কম কম পড়ে। তবে বিডিআইটির ক্ষেত্রে ব্যাপারটা আলাদা। এখানে অনেক বিগিনার আছেন। তাই বিডিআইটিতে পোস্ট লিখলে সেটি ইফেক্টিভ হয়।

3 Likes

জ্বী ভাই, সেটাই খেয়াল করেছি।

2 Likes