bottom

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

برای درک این ویژگی باید با ویژگی position کاملا آشنا باشید.

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

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

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

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

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

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

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

.container {
  position: relative;
}

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

 

 

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

 
همانطور که در مثال زیر مشاهده می کنید %100 برای ویژگی 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 پشتیبانی می شود.