مفهوم z-index در CSS: درک Context انباشت

خوب بچه‌ها، امروز درباره یک موضوع جالب و مهم در CSS صحبت خواهیم کرد؛ چیزی که معمولا باعث سردرگمی زیادی می‌شود: z-index و Context انباشت. این مفاهیم واقعا در طراحی وب سایت خیلی مهم هستند و درک صحیح آن می‌تواند به ساخت طرح‌بندی‌های پیشرفته و زیبا کمک کند.

ابتدا از z-index شروع می‌کنیم. z-index در CSS به شما اجازه می‌دهد تا ترتیب انباشت عناصر را در محور z یا همان بُعد سوم، کنترل کنید. یعنی شما می‌توانید تعیین کنید کدام عنصر بر روی عناصر دیگر نمایش داده شود.

این ویژگی فقط برای عناصری که موقعیت آنها به صورت absolute, relative, fixed, یا sticky تنظیم شده باشد، قابل استفاده است. اگر موقعیت عنصری به صورت قابل اسکرول نباشد (مثل static)، تنظیم z-index تأثیری بر روی آن ندارد.

اما Context انباشت چیست؟ Context انباشت مجموعه‌ای از عناصر است که در همان سطح انباشت یا stacking order قرار دارند و z-index تنها روی آنها تأثیر می‌گذارد. این Context می‌تواند با ایجاد یک موقعیت جدید و اختصاص z-index خاص به یک عنصر، تنظیم شود. این باعث می‌شود عناصر فرزند این عنصر در همان Context جدید انباشت قرار بگیرند.

اجازه دهید با یک مثال کد، این موضوع را بیشتر توضیح دهیم.

    <style>
        .parent {
            position: relative;
            z-index: 1;
            background: lightblue;
            padding: 20px;
        }
        .child {
            position: absolute;
            z-index: 10;
            background: coral;
            width: 100px;
            height: 100px;
            top: 10px;
            right: 10px;
        }
    </style>
    <div class="parent">
        این یک عنصر والد است.
        <div class="child">
            کودک
        </div>
    </div>
    

حال بیایید نگاهی به این کد بیندازیم و آن را بررسی کنیم؛ چه اتفاقی می‌افتد؟

<style>: این تگ <style> برای تعریف CSS داخلی به کار می‌رود و شامل قوانین CSS مربوط به ظاهر و موقعیت عناصر است.

.parent: این استایل مربوط به عنصر والد است که دارای موقعیت relative و رنگ پس‌زمینه روشن است.

z-index: 1;: این ویژگی z-index برای عنصر والد یک Context جدید ایجاد می کند که عناصر فرزند بر اساس آن انباشت می‌شوند.

.child: این استایل برای عنصر فرزند است که به صورت absolute قرار دارد و یک رنگ پس‌زمینه دیگر دارد.

z-index: 10;: این z-index در اینجا به عنصر فرزند اشاره می‌کند و نشان می‌دهد که این عنصر بر روی عناصر دیگر در همان Context جدید انباشت قرار می‌گیرد.

با درک این مفاهیم، شما می‌توانید کنترل بهتری روی چیدمان عناصر روی هم در صفحات وب خود داشته باشید، که برای طراحی‌های پیچیده و لایه‌بندی‌های زیبا واقعا ضروری است.