محبوب
2 دقیقه پیش | امیت سرکیسیان، اولین شهید مدافع حرم ارامنه! / شایعه 0506این تصویر جعلی است و عکس اصلی مربوط به شهید مدافع حرم هادی شجاع در مشهد می باشدمتن و پاسخ شایعه |
2 دقیقه پیش | وقتی موبایل برای سلامت شما مفید می شود!!جریان سریع امور در دنیای امروز به حواسپرتی بیشتر و نداشتن وقتی برای آسودگی انجامیده است. در چنین شرایطی نیازهای بدن به آسانی فراموش میشود. خوشبختانه همان وسایلی که ... |
زنگ CSS: جلسه دوازدهم - تعیین موقعیت المان با دستور fixed و absolute
در جلسهی قبل، نحوهی تعیین موقعیت المانها توسط دستور relative را فرا گرفتیم. در این بخش قصد داریم تا بگوییم که چگونه میتوان یک المان را به صورت فیکس شده در یک جای صفحه قرار داد. همچنین نحوهی قرارگیری المان از طریق دستور absolute را فرا خواهیم گرفت. با ما همراه باشید.
حتما شما هم به صفحاتی که یک بخش ثابت دارند برخوردهاید. غالبترین مثال این موضوع را در منوهایی که در بالای سایت همراه اسکرول کردن صفحه در جای خود ثابت میمانند و محو نمیشوند، دیدهایم. ما در این آموزش ابتدا سراغ ایجاد چنین المانهایی رفتهایم.
المان فیکس شده:نام: position: fixed
این دستور چه کاری انجام میدهد؟ نحوه و محل قرار گیری المان های شما رامشخص میکند. ما در این قسمت با موقعیت فیکس شده کار داریم.
چه چیزهایی را در مقابلش بنویسیم؟ در قدم اول از دستور fixed استفاده میکنیم. سپس جایی که المان ما باید فیکس شود را برایش مشخص میکنیم. نحوه مشخص کردن مکان المان نیز بدین صورت است که فاصله مورد نظرمان را از سمت چپ، راست یا بالا و پایین برای المان مشخص میکنیم.
نمونه نوشتن این دستور: Position: fixed و سپس مقدار فاصله از راست، چپ، بالا و پایین
در این حالت المان اچ تی ام ال شما به صورت ثابت در جای خود میایستد و به هیچ قیمتی تکان نمیخورد!حتی اگر صفحه را اسکرول هم کنید این المان حرکت نمیکند و محو نمیشود. از این المان برای مواقعی که طراح قصد دارد یک تکه از صفحه را در هر قسمتی از صفحه در اختیار کاربران قرار دهد (مثل تبلیغات گوشه صفحه یا صفحه چت آنلاین پشتیبانی ) استفاده میشود. ما در این قسمت هم یک المان فیکس شده در گوشه سمت راست صفحه قرار دادهایم که با قاب سبز رنگ مشاهده میکنید.
HTMLویدیو مرتبط :
آموزش طراحی سایت با CSS | تعیین موقعیت ثابت "fixed" عناصر صفحه با CSS