با درود سرویس شما ملازمان عزیز که پیگیر یادگرفتن های در وب سایت عصر نوشتن میباشید . بابت وقفه ی طولانی که بین نصیب چهاردهم و پانزدهم تولید شد از شما بزرگواران پوزش می طلبیم و همت می‌کنیم تا پس از این , ادامه فراگیری ها با سرعت بیشتری در وبسایت قرار گیرد . در‌این نصیب از یادگرفتن پباده سازی وبسایت از اساس به بررسی پوزیشن‌ها در CSS میپردازیم . با ما همراه گردید
خصوصیت های دیگر لایه ها برای ادغام بندی قالب
برای مخلوط بندی , صورت دادن و ساختن یک طرح CSS خط مش های اکثری موجود است که ما همت می‌کنیم راحت ترین و معمولی ترین شیوه را تعیین کنیم تا شما سریعتر ایده های تان را اجرا نمایید و به سود دلخواه دست یابید .
براین اساس از اسم بردن و توضیح تک تک خصوصیت های ساختاری CSS که کاربردهای مشابهی دارا هستند صرف لحاظ کرده و صرفا آنان که کاربرد بیشتری دارا‌هستند را با ذکر نمونه توضیح میدهیم .
توضیح اصلی : از‌آن‌جا‌که کدهای HTML و CSS به لهجه پارسی نیستند و در همگی جهان به صورت مشترک به لهجه انگلیسی به فعالیت می‌روند , ترجمه ی آنان به پارسی در یادگیری مخاطب خلل ساخت کرده و منجر کژ فهمی و نادرست در یادگیری خواهد شد .
بنابر این در‌پی این خصوصی آموزشی سعی در تفهیم کاربرد هر کد داریم و ترجمه واژه و کلمه به واژه و برگردان کلمه های هر فرمان از لهجه انگلیسی به لهجه پارسی مد نظرمان نخواهد بود .
درخصوص Absolute Position در CSS بیشتر بدانیم
Position ها ( پوزیشن به معنای طرز قرار گیری و حالت ) به هر لایه در CSS امر می دهند که برای مثال نسبت به لایه ی بالایی به مقدار 5 پیکسل و نسبت به لایه ی سمت راست 20 پیکسل مسافت بگیرند . براین اساس منزلت شان در ادغام قالب نسبت به لایه های دیگر معین می‌شود .
به‌دنبال به بررسی Absolute Position میپردازیم . در‌این مدل پوزیشن شما میتوانید هر لایه را به مناسب در موقعیتی از کاغذ قرار دهید سوای در لحاظ به دست آوردن منزلت لایه های دیگر . با استفاده از این Position می توان لایه ها را شناور کرد برای مثال دو یا این که یک‌سری لایه را روی لایه دیگر قرار اعطا کرد .
برای توضیح بیشتر یک جعبه زردرنگ به جعبه قرمز رنگ رنگی که در نصیب چهاردهم ساخت کردیم بیشتر می‌کنیم : ( پوشه متنی تصویر زیر در پایان مقاله برای دانلود بیان شده شده‌است )
پباده سازی وبسایت نصیب 15
در اینجا ما یک div با id , “ yellowblock ” را باطن div قرمز‌رنگ با id , “ redblock ” قرار داده ایم . برای شعور خوبتر رده این دو جعبه در برگه , مرورگرتان را تغییر‌و تحول سایز دهید و کوچک و بزرگ نمائید .
توصیه : شما میتوانید در‌این نشانی : اینجا با تغییر و تحول مقادیر top و left و کلیک روی آیتم “ See Result ” پوزیشن absolute را در برگه خوب تر شعور نمائید .
پس اکنون متوجه شدیم که هر گاه خواستیم لایه ای را به اصطلاح شناور کنیم و در جای خاصی از کاغذ در اختیار بگذاریم از پوزیشن absolute با مقادیر مناسب استفاده می‌کنیم .
در شرایطی‌که شم میکنید این معنا برای تان قابل لمس نیست نگران نباشید . قرار نیست در‌این پروژه از آن استفاده کنیم . ولی بدون شک روی که بخواهید پروژه های بزرگتر را اجرا فرمائید به مفاهیم و امرها بیشتری نیاز خواهید داشت .
پوزیشن Relative
با پوزیشن absolute اجزا نسب به کلی ورقه فضاگیر میشوند برای مثال به یک لایه امر میدهیم که از بالای ورقه 200 پیکسل مسافت بگیر .
ولی در پوزیشن relative لایه ها نسبت به لایه قبل مقعیت دهی میشوند . در اینجا یک نمونه را بررسی می‌کنیم .
این کدها را بین کلاس های پروژه تان قرار دهید . بین تگ ها : ( فولدر متنی تصویر زیر در پایان مقاله برای دانلود بیان شده شده‌است )
پباده سازی وبسایت نصیب 15
این کدها را بین تگ body قرار دهید : ( فولدر متنی تصویر زیر در پایان مقاله برای دانلود مطرح شده شده‌است )
پباده سازی تارنما نصیب 15
در بین سه پاراگراف ساخت شده , به پاراگراف میانه با کلاس “ nudged ” پوزیشن relative اختصاص دادیم . که سود را در تصویر سمت راست ذیل مشاهده میکنید .
تصویر سمت چپ مرتبط با همین سه پارا گراف است با این تفاوت که پوزیشن relative آن را حذف کرده ایم .
پباده سازی سایت نصیب 15
در سود به خیر مشاهده میکنید که پوزیشن relative به لایه فرمان می‌دهد تا موقعیتش را نسبت به لایه ی پیشین از خودش گزینش نماید .