بروز رسانی دی ۲۶ام, ۱۳۹۹ ۳:۰۴ بعد از ظهر
فروردین ۳۱, ۱۳۹۵ admin آموزش پیشرفته css, آموزش مقدماتی css 0
با بهره بری و استفاده از ویژگی 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 پشتیبانی می می شود.
دی ۲۶, ۱۳۹۹ 0
خرداد ۰۳, ۱۳۹۹ 0
اردیبهشت ۰۹, ۱۳۹۹ 0
فروردین ۰۲, ۱۳۹۹ 0
مرداد ۱۲, ۱۳۹۹ 0
اردیبهشت ۰۸, ۱۳۹۹ 0
خرداد ۱۴, ۱۳۹۶ 0
اردیبهشت ۱۰, ۱۳۹۶ 0