بروز رسانی بهمن ۲۵ام, ۱۳۹۹ ۵:۰۲ بعد از ظهر
فروردین ۲۷, ۱۳۹۵ admin آموزش پیشرفته css, آموزش مقدماتی css 0
با بهره بری و استفاده از ویژگی position
می قدرت مکان یک عنصر را در صفحه مشخص کرد.
از طریق آن ویژگی می توانید اراده و تصمیم راسخ بگیرید که آیا مکان عنصر نسبت به flow صفحه مشخص می شود (حالت پیشفرض) یا آنکه در عین حالی که جایگاهش در flow حفظ می می شود مکانش تغییر کند و همچنین یا آنکه مکان آن هم را نسبت به یکی از عناصر اجدادش مشخص کنید. همینطور می توانید تغییر مکان را نسبت به viewport انجام دهید.
دو کلمه ای که در بالا به زبان انگلیسی نوشته شده اند جز کلمات پر کاربرد خواهند بود که مستلزم و نیاز می باشد به زبان انگلیسی آن هم ها را بشناسید ولی باید توجه داشت تعریف آنها در ادامه آمده می باشد.
زمانی که غناصر بصورت عادی در زیر هم چیده می شوند در صورتی که عنصر بالایی را حذف کنیم تمام عناصر به سمت بالا جابجا می شوند. و همچنین یا در صورتی که عناصری در کنار هم چیده شده باشند در صورتی که عنصری را از اول لیست حذف کنیم عناصر دیگر جابجا می شوند و همچنین مکان خالی را پر می کنند. یا آنکه در صورتی که به عنصری margin
بدهیم باعث می می شود تا مکان عناصر اطراف آن هم تغییر کند. آن نشان می دهد که عناصر در یک جریان (flow) یکسان قرار دارند و همچنین به نوعی به هم تکیه داده اند و همچنین به هم متصل خواهند بود و همچنین در یک لایه زندگی می کنند.
زمانی که گفته می می شود عنصری را از flow صفحه خارج می کنیم, منظور آن می باشد که در صورتی که عنصر از آن به بعد جابجا می شود تکان خوردن آن هم تاثیری بر دیگر عناصر و همچنین مکان آنها نخواهد گذاشت.
قابی می باشد که می توانید از طریق آن هم قسمتی از یک سند وب را در لحظه دیدن کنید, از طریق اسکرول می قدرت Viewport را جابجا کرد تا بقیه محتوای صفحه قابل دیدن کردن و نمایش باشند.
در حالت پیشفرض تمام عناصر بصورت static در صفحه جای گرفته اند. آن بدین معنی می باشد که عنصر در جریان یا آن هم flow عادی صفحه قرار دارد. زمانی که گفته می می شود جهت عنصری position
مشخص کردن شده می باشد منظور آن می باشد که مقدار ویژگی position
آن هم از static
به یکی از چهار مقدار sticky
, fixed
,absolute
,relative
تغییر کرده می باشد.
دو مقدار دیگر هم اخیرا جهت آن ویژگی در CSS3 در نظر گرفته شده اند و همچنین آنها page
و همچنین center
می باشند. که البته آن دو مقدار به همراه مقدار sticky
از نظر پشتیبانی مرورگرها هنوز در شرایطی نیستند که مورد بهره بری و استفاده قرار بگیرند.
زمانی که از مقادیری به غیر از static
جهت یک عنصر بهره بری و استفاده می شود, می قدرت مکان عنصر را با بهره بری و استفاده از ویژگی های right ,left, bottom و همچنین top مشخص کردن کرد.
آن مشخص کردن مکان نسبت به یک سیستم مختصاتی خاص صورت می گیرد که آن هم سیستم مختصات با توجه به مقادیر مختلفی که ویژگی position
می گیرد, متغایر و متفاوت خواهد بود.
در ادامه مقادیر آن ویژگی را بررسی کردن شده اند:
در صورتی که آن مقدار جهت یک عنصر مشخص کردن می شود دو اتفاق می افتد:
۱٫ عنصر یک سیستم مختصات جهت آن هم دسته از فرزندانش که شامل position: absolute
خواهند بود, فراهم می کند.
۲٫ یک سیستم مختصات هم جهت خودش مشخص کردن می کند.
آن بدین معنی می باشد که می توانید عنصر را با بهره بری و استفاده از ویژگی top
و همچنین left
و همچنین غیره جابجا کنید. نقطه مبدا مختصات آن هم مکان ابتدایی و اولیه می باشد که عنصر جای دارد.
از تصویر بالا دو نقطه در مورد حالت relative
گرفتن می می شود:
اول آنکه با آنکه عنصر جابجا شده می باشد, جایگاهش در flow صفحه حفظ شده می باشد و همچنین عناصر مجاور آن هم جایش را پر نکرده اند.
دوم آنکه زمانی که عنصری را با آن حالت جابجا می کنیم آن عنصر تاثیری بر دیگر عناصر نخواهد داشت و همچنین موجب تکان خوردن و همچنین جابجا شدن آنها نخواهد شد.
زمانی که از آن حالت جهت یک عنصر بهره بری و استفاده می می شود, می قدرت عنصر را نسبت به عنصری از اجدادش جابجا و همچنین مکانش را مشخص کردن کرد. همینطور دو اتفاقی که جهت حالت relative
می افتد جهت آن حالت نیز بوجود می آید, یعنی:
۱٫ عنصر یک سیستم مختصات جهت آن هم دسته از فرزندانش که شامل position: absolute
خواهند بود, فراهم می کند.
۲٫ یک سیستم مختصات هم جهت خودش مشخص کردن می کند.
دو تفاوت بین absolute
و همچنین relative
وجود دارد:
اول آنکه زمانی که عنصر در حالت absolute
باشد, جابجا شدن عنصر نسبت به اولین پدری از اجدادش که حالت relative
دارد انجام می می شود. و همچنین مختصات آن هم هم نقطه صفر top
و همچنین left
عنصر پدر می باشد. ولی باید توجه داشت هنگام و زمانی که عنصر در حالت relative
می باشد جابجا شدن آن هم نسبت به حالت ابتدایی و اولیه خود عنصر می باشد و همچنین مستقل از عناصر پدرش می باشد.
( آنکه که می گوییم عنصر نسبت به اولین پدری از اجدادش که حالت relative
دارد مختصات می پذیرد منظور آن می باشد که عنصر absolute
به پدرش نگاه می کند در صورتی که relative
یا absolute
یا fixed
بود نسبت به آن هم مکان خود را مشخص می کند, ولی باید توجه داشت در صورتی که هیچ یک از آن حالات را نداشت به عنصر پدر بزرگش رجوع می کند در صورتی که آن هم هم نداشت همانطور به به سمت بالا حرکت می کند تا به یک عنصر با آن حالت برسد در صورتی که در نهایت هیچ عنصری یکی از آن حالت ها را نداشت یعنی حتی html و همچنین body هم آن حالات را نداشتند نسبت به صفحه مکان عنصر مشخص کردن می می شود. )
نا گفته نماند که تا زمانی که جهت عنصر مختصات بوسیله top
و همچنین left
و همچنین غیره مشخص کردن نشود عنصر از flow خارج نخواهد شد و همچنین در آن هم مکان قبلیش جای خواهد گرفت.
دوم آنکه زمانی که از relative
بهره بری و استفاده می شود جایگاه قبلی عنصر در flow حفظ می می شود ولی باید توجه داشت همانطور که در دو تصویر زیر دیدن می کنید هنگام و زمانی که که از absolute
جهت عنصر بهره بری و استفاده می شود عنصر ار flow
خارج می می شود.
تصویر زیر حالت عادی یا آن هم حالت static
عنصر را نشان می دهد:
ولی باید توجه داشت آن تصویر زمانی می باشد که عنصر بوسیله مقدار absolute
مشخص کردن مکان شده می باشد:
در تصویر بالا عنصر صورتی رنگ نسبت به عنصری که حاشیه خاکستری دارد مشخص کردن مکان شده می باشد و همچنین کد بصورت زیر می باشد:
.container
position: relative;
.element
position: absolute;
top: 30px;
right: 40px;
آن حالت کاملا مشابه به حالت absolute
می باشد یعنی عنصر در flow خارج می می شود ولی باید توجه داشت تفاوت آن حالت در آن می باشد که عنصر بجای آنکه نسبت به یک عنصر از اجدادش مشخص کردن مکان می شود, نسبت به viewport مکانش مشخص می می شود. و همچنین نقطه دیگر آنکه در آن هم مکان در هر نوعی حالت ثابت می ماند و همچنین حتی اسکرول کردن صفحه روی آن هم تاثیری نخواهد گذاشت.
یکی از پرکاربردترین موارد جهت بهره بری و استفاده از حالت fixed
جهت ثابت کردن هدر یا منوی اصلی وبسایت و مرکز خبرهای جدید در بالای صفحه می باشد. یا گاهی تبلیغات را در کنار صفحه بوسیله آن حالت بطور زجرآوری جهت کاربر ثابت می کنند
در دموی زیر اسکرول کنید تا تاثیر آن حالت را بر روی منو دیدن کنید:
See the Pen position: fixed; by Mojtaba Seyedi (@seyedi) on CodePen.
آن حالت مخلوطی از حالت relative
و همچنین fixed
می باشد. عنصر شبیه به حالت relative
رفتار می کند تا هنگام و زمانی که که به یک نقطه از اسکرول برسد. سپس بلافاصله رفتارش به حالت fixed
تغییر پیدا کردن می می شود. کد زیر را در نظر بگیرید:
.element
position: sticky;
top: 20px;
در اینجا عنصر در هر کجا که باشد تا زمانی که اسکرول باعث نشود تا فاصله آن هم از بالای صفحه بع ۲۰ پیکسل برسد رفتار relative
خواهد داشت ولی باید توجه داشت به محض آنکه فاصله آن هم در زمان اسکرول به ۲۰ پیکسلی بالای صفحه برسد در آن هم فاصله از بالای صفحه ثابت خواهد ماند. در دموی زیر آن رفتار توسط جاوااسکریپت طراحی شده می باشد ولی باید توجه داشت به محض آنکه پشتیبانی آن رفتار در مرورگرها به حالت امنی برسد می توانید به راحتی از CSS جهت پیاده سازی آن حالت بهره بری و استفاده کنید:
See the Pen KzoOqG by Mojtaba Seyedi (@seyedi) on CodePen.
همانطور که از نام آن حالت پیدا می باشد باعث می می شود تا عنصر در وسط عنصر نگهدارنده اش جای بگیرد و همچنین همچنین توسط ویژگی های top و همچنین left و همچنین غیره به هر یک از چهار جهت نیز می تواند انتقال داده می شود.
آن حالت مثل حالت absolute
عنصر را از flow خارج می کند و همچنین آن عنصر دیگر تاثیری بر عناصر دیگر نخواهد داشت.
هنوز رفتار دقیق آن حالت کاملا مشخص نیست! ( ولی بایستی و حتما چیز خوبی از کار در بیاد )
زمانی که عنصری در حالت absolute
باشد, عرض آن هم به مقدار محتوای داخل آن هم خواهد بود (دقیقا مثل زمانی که از display: table جهت یک عنصر بهره بری و استفاده می کنیم, یعنی عرض عنصر حداقل می می شود). جهت آنکه عنصر را مجبور می شود تا تمام عرض نگهدارنده اش را پر کند دو راه وجود دارد. یک آنکه می توانید با بهره بری و استفاده از ویژگی wdith
عرض جهت عنصر مشخص کردن کنید. مثلا %۱۰۰
. دوم آنکه به صورت زیر عمل کنید:
.element
position: absolute;
left: 0;
right: 0;
همینطور در صورتی که می خواهید عنصری که حالت absolute
دارد از لحاظ عمودی کاملا کشیده می شود نیز می توانید بصورت زیر عمل کنید:
.element
position: absolute;
top: 0;
bottom: 0;
در صورتی که جهت عنصری در آن حالت height
مشخص می شود و همچنین همینطور top
و همچنین bottom
مشخص کردن گردد: top
مشخص کردن کننده مکان عنصر خواهد بود و همچنین برنده مسابقه خواهد شد.
در صورتی که width
جهت عنصر مشخص کردن می شود و همچنین همینطور دو مقدار left
و همچنین right
را داشته باشیم, در صورتی که جهت صفحه چپ به راست باشد left
مشخص کردن کننده مکان عنصر خواهد بود و همچنین در صورتی که جهت صفحه راست به چپ (rtl
) باشد, right
برنده خواهد بود.
نقطه دیگر آنکه عناصر در حالت fixed
دائما ثابت نسبت به viewport خواهند بود مگر آنکه یکی از عناصر پدرشان وارد بازی transform می شود. در آن صورت عنصر fixed
نسبت به آن هم عنصر پدر جای می گیرد و همچنین با اسکرول نیز حرکت می کند.
دموی زیر را با دقت بررسی کردن کنید تا با حالت های متنوع و گوناگون و مختلف ویژگی position
بهتر آشنا شوید:
See the Pen position by Mojtaba Seyedi (@seyedi) on CodePen.
ویژگی position
در تمام مرورگرهای اصلی از قبیل کروم, فایرفاکس, سافاری, اپرا, اینترنت اکسپلورر, آندروید و همچنین iOS پشتیبانی می می شود. ولی باید توجه داشت هنگام و زمانی که مقدار fixed
را دارد در بعضی مرورگرها بایستی و حتما مراقب بود:
همینطور پشتیبانی حالت sticky
در جدول زیر مشخص کردن شده می باشد:
و همچنین حالت های page
و همچنین center
فعلا در هیچ مرورگری پشتیبانی نمی شوند.
بهمن ۲۵, ۱۳۹۹ 0
بهمن ۰۹, ۱۳۹۹ 0
بهمن ۰۱, ۱۳۹۹ 0
دی ۲۶, ۱۳۹۹ 0
مرداد ۱۲, ۱۳۹۹ 0
اردیبهشت ۰۸, ۱۳۹۹ 0
خرداد ۱۴, ۱۳۹۶ 0
اردیبهشت ۱۰, ۱۳۹۶ 0