امتیاز دهید:

در این ماژول قصد داریم تا با Value دیگری تحت عنوان absolute به معنی "مطلق" در طراحی Layout با سی اس اس (CSS) آشنا شویم. absolute بر خلاف relative این امکان را به طراح می دهد تا ترتیب پیش فرض نمایش تگ های اچ تی ام ال (HTML) را دنبال نکرده و هر تگی را در هر کجای صفحه که خواست نمایش دهد. برای درک بهتر نحوه عملکرد absolute کدهای اچ تی ام ال (HTML) زیر را وارد ویرایشگر کد خود می کنیم:

<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="utf-8">
        <title>Netshahr</title>
        <link type="text/css" rel="stylesheet" href="css/main.css">
    </head>          <body>         <p id="square1">مربع شماره یک</p>         <p id="square2">مربع شماره دو</p>     </body> </html>

همانطور که در کد فوق می بینیم دو پاراگراف ایجاد کرده و برای هر یک id یی در نظر گرفته ایم. حال اقدام به تکمیل کدهای سی اس اس (CSS) می کنیم:

#square1 {
   width:100px;
   height:100px;
   background-color:yellow;
   position:relative;
   top:20px;
   left:222px;
}
#square2 {
   width:100px;
   height:100px;
   background-color:violet;
   position:relative;
   top:20px;
   left:20px;
}

پس از تنظیم ابعداد هر یک از مربع ها از طریق Propertyهای width و height و همچنین انتخاب رنگی برای پس زمینه آن ها، position هر دو مربع را برابر با relative قرار داده ایم. سپس مقدار top را برای هر دو مربع معادل با 20 پیکسل قرار داده ایم. در نهایت مقدار left را برای مربع اول معادل با 222 پیکسل و برای مربع دوم معادل با 20 پیکسل قرار داده ایم. اکنون می توانیم فایل خود را داخل مروگر اجرا کنیم:

1. ansolute layout

در ادامه قصد داریم تا مقدار position مرتبط با مربع اول را از relative به absolute تغییر دهیم:

#square1 {
   width:100px;
   height:100px;
   background-color:yellow;
   position:absolute;
   top:20px;
   left:222px;
}
#square2 {
   width:100px;
   height:100px;
   background-color:violet;
   position:relative;
   top:20px;
   left:20px;
}

ابتدا فایل خود را داخل مرورگر به روز رسانی کرده و سپس به توضیح بیشتر پیرامون نحوه عملکرد absolute می پردازیم:

2. ansolute layout

می بینیم که مربع شماره دو به بالا انتقال یافت. در حقیقت زمانی که Value مرتبط با position یک تگ را برابر با absolute قرار می دهیم، دیگر مرورگر آن تگ را به ترتیبی که کدهای اچ تی ام ال نوشته شده اند نشان نخواهد داد گویی از کدهای اچ تی ام ال (HTML) حذف شده است. از آنجا که به طور فرضی این تگ از تگ های اچ تی ام ال حذف شده است، تگ هایی که بعد از آن نوشته شده اند به جای آن انتقال پیدا می کنند بنابراین به همین دلیل است که مربع بنفش رنگ به بالا و جای مربع زرد رنگ انتقال یافت.
نکته ای که در ارتباط با absolute وجود دارد این است که اگر تگ یی که مقدار absolute برای آن در نظر گرفته شده است داخل تگ <body> قرار داشته باشد، اندازه های top، right، bottom و left نسبت به تگ <body> یا به عبارت دیگر لبه های مرورگر  مد نظر قرار داده می شوند (همانطور که در تصویر فوق می بینیم، مربع زرد رنگ نسبت به لبه صفحه مرورگر 20 پیکسل از بالا و 222 پیکسل از پایین گرفته است.
اما اگر یک تگ اچ تی ام ال حاوی absolute باشد و این تگ داخل تگ دیگری که خود نسبت به تگ <body> دارای فاصله است قرار گیرد، آنوقت تگ اول جایگاه خود را نسبت به تگ دوم مشخص می سازد نه تگ <body>. برای روش شدن این مطلب کدهای اچ تی ام ال (HTML) فوق را به صورت زیر بازنویسی می کنیم:

   <body>
       <div id="square1">
           <div id="square2"></div>
       </div>
   </body>

همانطور که در کد فوق می بینیم، ابتدا یک تگ <div> ایجاد کرده ایم تحت عنوان square1 سپس یک تگ <div> دیگر داخل آن ایجاد کرده ایم تحت عنوان square2. اکنون به فایل سی اس اس (CSS) رجوع کرده و اقدام به کدنویسی برای این دو تگ می نماییم (به خاطر داشته باشیم که از این پس square1 به عنوان تگ اصلی یا parent شناخته می شود و square2 به عنوان تگ زیرشاخه یا child مد نظر قرار داده خواهد شد):

#square1 {
   width:300px;
   height:400px;
   background-color:yellow;
   position:relative;
   top:30px;
   left:44px;
}
#square2 {
   width:100px;
   height:100px;
   background-color:violet;
   position:absolute;
   top:120px;
   left:0;
}

کاری که کرده ایم این است که پس از در نظر گرفتن مقادیری برای ابعاد و همچنین رنگ square1، مقدار position آن را برابر با relative قرار داده ایم. به عبارت دیگر این تگ به همان ترتیبی که در کدهای اچ تی ام ال (HTML) نوشته شده است به نمایش در خواهد آمد با این تفاوت که فواصل این تگ را از چهار جهت می توان تنظیم کرد. از این رو این تگ از بالا به میزان 30 پیکسل و از سمت چپ به میزان 44 پیکسل فاصله گرفته است. مقدار position تگ square2 برابر با absolute قرار گرفته است اما از آنجا که این تگ داخل تگ square1 قرار دارد، هر فاصله ای که برای top و left این تگ در نظر بگیریم، نسبت به تگ square1 محاسبه خواهد شد. برای مشاهده خروجی برنامه، فایل اچ تی ام ال (HTML) خود را داخل مرورگر اجرا می کنیم:

3. ansolute layout

همانطور که می بینیم جایگاه square2 که بنفش رنگ است نسبت به square1 که زرد رنگ است مشخص شده است.


نظرات
نظرات
  • امیر :

    سلام بسیار عالی


    1396/12/26 19:43:28
  • ali :

    سلام خسته نباشید واقعا...ممنونم عالی


    1396/01/21 18:43:27

برای کامنت گذاری، فرم زیر را پر کنید یا ثبت نام کنید ( جهت ورود به سیستم می توانید از استفاده کنید )