با بهره بری و استفاده از ویژگی top می قدرت فاصله لبه بالایی عناصری که position گرفته اند را از مبداشان مشخص کردن کرد.

جهت درک آن ویژگی بایستی و حتما با ویژگی position کاملا آشنا باشید.

به ویژگی هایی نظیر top ویژگی های آفست می نامند. دیگر ویژگی های مرتبط به آفست عناصر left, right, bottom می باشند.

ویژگی های آفست تنها و فقط بر روی عناصری که position دارند تاثیر می گذارند و همچنین بر روی عناصر دیگر هیچ گونه تاثیری ندارند. و همچنین البته position عنصر هم بایستی و حتما از نوع غیر static باشد.

جهت عنصری که حالت position آن هم relative باشد ویژگی top مشخص کردن کننده فاصله لبه بالایی عنصر نسبت به مکان ابتدایی و اولیه ای که داشته می باشد, می باشد.

در صورتی که حالت عنصر absolute باشد, فاصله لبه بالایی نسبت به عنصر پدری که حالت relative دارد مشخص کردن می می شود.

جهت حالت های fixed و همچنین sticky آن فاصله از viewport می باشد.

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

 
در مثال زیر لبه بالایی عنصر ۵۰ پیکسل از لبه بالایی عنصر نگهدارنده اش فاصله می گیرد:

.container 
position: relative;


.absolute-element 
position: absolute;
top: 50px;
left: -20px;

در صورتی که از مقدار درصدی بهره بری و استفاده می شود, آن هم مقدار بر اساس ارتفاع عنصری می باشد که عنصر ما بر اساس آن هم مکانش مشخص کردن شده می باشد. (توجه کنید که صرفا عنصر پدر, منظور نیست, بلکه شاید عنصری که عنصر ما نسبت به آن هم مکان می گیرد پدر بزرگش باشد نه پدر آن هم, شاید هم یکی از اجدادش باشد )

 
همانطور که در مثال زیر دیدن می کنید %۱۰۰ جهت ویژگی top به معنای کل ارتفاع عنصری از پدرانش می باشد که حالت relative دارد:

.container 
position: relative;


.absolute-element 
position: absolute;
top: 100%;
right: 0;

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

همچنین مقدار top می تواند auto نیز باشد که در آن صورت مکان عنصر وابسته به مقدار bottom خواهد بود. ولی باید توجه داشت در صورتی که مقدار bottom هم auto باشد, عنصر در راستای عمود فاصله ای از مکان ابتدایی و اولیه اش نخواهد گرفت.

دموی زیر را بررسی کردن کنید:
 

See the Pen top by Mojtaba Seyedi (@seyedi) on CodePen.

پشتیبانی نرم افزار مرورگر اینترنتی ها

ویژگی top در تمام مرورگرهای اصلی از قبیل کروم, فایرفاکس, سافاری, اپرا, اینترنت اکسپلورر, آندروید و همچنین iOS پشتیبانی می می شود.