قرار دادن عناصر روی یکدیگر در سی اس اس

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

برای مشاهده متن کامل قرار گرفتن عناصر روی یکدیگر در سی اس اس به ادامه مطلب مراجعه نمایید.

قرار دادن عناصر روی یکدیگر در سی اس اس

ممکن است طرح و قالب سایت ما طوری شکل گرفته باشد که نیاز داشته باشیم تا عناصر روی یکدیگر قرار گرفته و یا اصطلاحا همپوشانی داشته باشند.

برای این کار می توانیم به عناصرمان در صفحه موقعیت (Position) مورد نظر را بدهیم تا در مکان و موقعیت مدنظر ما قرار بگیرند. اما باید مشخص کنیم که از عناصری که همپوشانی دارند، کدام یک باید روی دیگری قرار گیرد (Forward) و کدامیک پشت دیگری بماند (Backward).

برای مثال میخواهیم چند مربع را روی هم قرار دهیم و اولویت همپوشانی را هم در آنها مشخص کنیم. به تصویر زیر نگاه کنید.

ابتدا کدهای HTML را می نویسیم.

<div class="square" id="dv1"></div>
<div class="square" id="dv2"></div>
<div class="square" id="dv3"></div>
<div class="square" id="dv4"></div>

چهار Div برای 4 مربع ایجاد می کنیم. به همه آن ها کلاس Square را نسبت داده و برای هر کدام یک ID جدا در نظر می گیریم. حال کدهای استایل یا همان سی اس اس (CSS) را وارد می کنیم.

.square{
        position: absolute;
        width: 100px;
        height: 100px;
    }
    #dv1{
        background-color: black;
        z-index: 2;
    }
    #dv2{
        background-color: lime;
        top: 50px;
        left: 50px;
        z-index: 3;
    }
    #dv3{
        background-color: #FF0080;
        top:30px;
        left: 80px;
        z-index: 1;
    }
    #dv4{
        background-color: #FF8000;
        top: 60px;
        left: 100px;
        z-index: 4;
    }

در کلاس Square اندازه و موقعیت Div ها تنظیم شده است. برای هر ID به طور مجزا یک رنگ پس زمینه انتخاب شده و موقعیت آن نیز از بالا و سمت چپ صفحه نیز تعیین شده است.

اما خصوصیتی (Property) که میتوان با آن چگونگی قرار گرفتن عناصر روی یکدیگر در سی اس اس و یا همان همپوشانی را تعیین کرد،Z-Index است. میتوان هر عددی را به Z-Index نسبت داد. هرعنصر که عدد مربوط به Z-Index آن از سایر عنصر بیشتر باشد، در صورت داشتن همپوشانی بر روی دیگری قرار خواهد گرفت.

توجه داشته باشید که خصوصیت (Property) Z-Index زمانی روی عنصر عمل خواهد کرد که خصوصیت Position عنصر دارای یکی از سه مقدار Fixed, Relative, Absolute باشد.

در این زمینه میتوانید به w3schools و همچنین به sitepoint مراجعه نمایید.