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