آموزش سی اس اس CSS

پراپرتی position برای تعیین نوع موقعیت بکار رفته برای یک المان مورد استفاده قرار میگیرید (static، relative، fixed، absolute، یا sticky).

پراپرتی position

پراپرتی position برای تعیین نوع موقعیت بکار رفته برای یک المان مورد استفاده قرار میگیرید.

پراپرتی موقعیت پنج مقدار دارد:

• static
• relative
• fixed
• absolute
• sticky

سپس از طریق پراپرتی های top، bottom، left، و right موقعیت المان مشخص میشود. هرچند، اگر پراپرتی position تعیین نشود این پراپرتی ها کار نمیکنند.

دقت داشته باشید که این پراپرتی ها براساس مقدار position متفاوت عمل میکنند.

position: static;

المان های HTML بصورت پیش فرض موقعیت static دارند.

زمانی که موقعیت المان استاتیک باشد پراپرتی های top، bottom، left، و right کار نمیکنند.

المانی که position: static; داشته باشد را نمیتوان بصورت خاص به آن موقعیت داد؛ همواره المان بصورت نرمال نمایش داده خواهد شد.

استایل بکار رفته برای المان بالا بصورت زیر است:

 
div.static {
    position: static;
    border: 2px solid #446cb2;
}
 

position: relative;

المانی که position: relative; دارد، نسبت به موقعیت فعلی خود موقعیت دارد. به عبارت دیگر، وقتی برای المانی که position: relative; داشته باشد top، bottom، left، و right تعیین کنیم، آن المان نسبت به موقعیت نرمال خود جابجا میشود. توجه داشته باشید که دیگر محتوا براساس فاصله بوجود آمده جابجا نمیشوند.

استایل بکار رفته برای المان بالا بصورت زیر است:

 
div.relative {
    position: relative;
    left: 30px;
    border: 2px solid #446cb2;
}
 

position: fixed;

المانی که position: fixed; داشته باشد، نسبت به ویوپورت موقعیت دارد، به عبارت دیگر، حتی زمانی که صفحه اسکرول میشود هم در جای خود ثابت می ماند. پراپرتی های top، bottom، left، و right برای تعیین موقعیت المان استفاده میشود.

هنگامی که المانی فیکس میشود فضای نرمال آن المان از بین میرود. به عبارت دیگر هیچ جای خالی در صفحه از خود به جای نیمگذارد.

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

 
div.fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    max-width: 300px;
    border: 2px solid #446cb2;
    background-color: #e5e5e5;
    padding: 7px;
}
 

position: absolute;

المانی که position: absolute; داشته باشد، به نسبت نزدیکترین position موقعیت میگیرد.

برعکس position: absolute; که نسبت به ویوپورت موقعیت میگیرد position: absolute; نسبت به نزدیکترین position موقعیت میگیرد، اما اگر المانی که position: absolute; داشته باشد هیچ المانی که position داشته باشد را بالاسر خود نداشته باشد (چه یک لول بالاتر باشد چه چند لول) نسبت به المان body موقعیت میگیرد و با صفحه اسکرول میخورد.

نکاتی که باید در ذهن داشته باشید

المانی که position: absolute; داشته باشد، به نسبت نزدیکترین position موقعیت میگیرد. پراپرتی position هر موقعیتی به جز static میباشد.

استایل بکار رفته برای المان بالا بصورت زیر است:

 
div.relative {
    position: relative;
    width: 400px;
    height: 200px;
    border: 2px solid #73AD21;
} 
div.absolute {
    position: absolute;
    top: 80px;
    right: 0;
    width: 200px;
    height: 100px;
    border: 2px solid #73AD21;
}
 

position: sticky;

المانی که position: sticky; داشته باشد، براساس اسکرول کاربر موقعیت میگیرد.

المان sticky بین relativeو fixed جابجا میشود. این جابجایی براساس موقعیت اسکرول است. موقعیت آن تا موقعی relative است که relative است که ویوپورت به نقطه تعیین شده میرسد و پس از آن به نقطه تعیین شده "میچسبد" (مانند fixed).

نکاتی که باید در ذهن داشته باشید

توجه داشته باشید که IE/Edge 15 و قبل تر از موقعیت sticky پشتیبانی نمیکنند. برای مرورگر سافاری باید از پیشوند -webkit- استفاده کنید. همچنین باید حداقل یکی از پراپرتی های top، bottom، left، و right را انتخاب کرده باشید تا موقعیت sticky کار کند

در مثال بالا المان در زمان اسکرول به بالای صفحه میچسبد top.

 
div.sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    background-color: e5e5e5;
    border: 2px solid #446cb2;
    padding: 7px;
}
 

روی هم انداختن المان ها

زمانی که به المان ها موقعیت (position) میدهید، میتوانید آن المان ها را روی هم بیاندازید.

پراپرتی z-index ترتیب المان ها را مشخص میکند (کدام المان جلو و کدام یکی پشت آن قرار بگیرد).

مقدار z-index میتواند مثبت یا منفی باشد.

نکاتی که باید در ذهن داشته باشید

I. المانی که ترتیب نمایش بزرگتری داشته باشد همواره جلو المانی که ترتیب نمایش کمتری دارد قرار میگیرد.

II. اگر دو المانی که با پوزیشن روی هم افتاده باشند مقدار z-index نداشته باشد، المانی که در کد HTML آخر نوشته شده باشد جلوی المان دیگر قرار میگیرد.

در مثال زیر متن را بر روی تصویر قرار داده ایم:

نوشتن دیدگاه

نام (اجباری)

آدرس پست الکترونیکی (اجباری است اما نمایش داده نمی‌شود)

آدرس سایت

مرا برای دیدگاه‌های بعدی به یاد بسپار

ارسال

لغو