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

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

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

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

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

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

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

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

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

.container 
position: relative;


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

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

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

.container 
position: relative;


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

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

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

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

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

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

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