آموزش CSS – آشنایی با fixed در طراحی Layout با سی اس اس (CSS) (جلسه ۳۲)

مقدار fixed به نوعی همانند absolute است با این تفاوت که  جایگاه آن همواره در صفحه ثابت خواهد بود. برای روشن شدن این موضوع کدهای زیر را وارد ویرایشگر متن خود می کنیم:

<!DOCTYPE html>
<html>
   
   <head>
       <meta charset="utf-8">
       <title>asrefonon</title>
       <link type="text/css" rel="stylesheet" href="/css/main.css">
   </head>
   
   <body>
       <div id="square1"></div>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <p>End</p>
   </body>
</html>

در کد فوق تگی از جنس <div> تحت عنوان square1 ایجاد کرده ایم. حال برای آنکه صفحه ای طولانی داشته باشیم از تگ </br> استفاده کرده ایم تا از قصد کاری کنیم که صفحه رو به پایین اسکرول شود و در انتها هم یک تگ پاراگراف حاوی عبارت End به معنی “پایان” قرار داده ایم.
در ادامه اقدام به ویراش کدهای سی اس اس می کنیم:

#square1 {
   width:100px;
   height:100px;
   background-color:orange;
   position:fixed;
   top:30px;
   left:244px;
}

ابعاد این تگ ۱۰۰ * ۱۰۰ پیکسل خواهد بود و رنگ پس زمینه نارنجی هم برای آن در نظر گرفته شده است. مقدار مرتبط با position برابر با fixed است و این در حالی است ک این تگ از بالا به میزان ۳۰ پیکسل و از سمت چپ به میزان ۲۴۴ پیکسل فاصله دارد. برای مشاهده خروجی، فایل اچ تی ام ال خود را در مرورگر اجرا می کنیم:

fixed_layout

می بینیم که این تگ همانند تگی که مقدار absolute برای position آن در نظر گرفته شده روی صفحه قرار گرفته در حالیکه از بالا به میزان ۳۰ پیکسل و از سمت چپ به میزان ۲۴۴ پیکسل فاصله گرفته است. همانطور که در تصویر فوق با یک فلش قرمز رنگ مشخص شده است، این صفحه ادامه دارد و با اسکرول کردن رو به پایین به ادامه صفحه خواهیم رسید. برای این منظور به پایین صفحه اسکرول می کنیم:

2-fixed_layout

می بینیم که پس از اسکرول کردن رو به پایین، عبارت End که در انتهای صفحه قرار گرفته است به نمایش در آمده اما نکته جالب اینجا است که مربع نارنجی رنگ جایگاه خود را حفظ کرده و به هیچ وجه با اسکرول کردن رو به پایین به خارج از صفحه انتقال داده نشده است.

221

اسماعیلی هستم مدیر عصر فنون. فارغ التحصیل مقطع کارشناسی ارشد رشته مهندسی فناوری اطلاعات (IT)

پیشنهاد لحظه ای
ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

توسط
تومان