تعیین موقعیت عناصر

 

موقعیت عناصر در صفحه

Positioningشما را قادر می سازد که موقعیت هر عنصر را به دقت در یک سند مشخص نمایید. می توان تعیین نمود که موقعیت یک عنصر به عنصر والد وابسته باشد یا به پنجره  مرورگر. positioning به ما کمک می کند تا بتوانیم یک عنصر را بر روی عنصر دیگر لایه بندی نماییم. Positioning شامل خاصیت position و چهار مقدار left , right , bottom ,top است که با استفاده از آنها مختصات دقیق محل قرار گیری عنصر را می توان تعیین کرد.

خصوصیت position 

خاصیت position به تنهایی قادر نیست کار خاصی را بر روی عنصر انجام  دهد و همیشه با خاصیت های left , right , left یا top همراه است، و یا بالعکس. اما قبل از اینکه به این خاصیت ها مقدار دهی شود باید حتماً به خصوصیت position یکی از چهار مقدار زیر را داد:

  •  : Static  مقدار پیش فرض، و همان حالت عادی قرار گرفتن عناصر طبق ترتیبی که در سند HTML است می باشد.
  • Relative   : اجازه می دهد که یک سند در یک محل خاص از سند قرار گیرد، و وابسته به عنصر والد می باشد.
  •  Absolute : اجازه می دهد که یک سند در یک محل خاص از سند قرار گیرد، و وابسته به پنجره مرورگر می باشد.
  • Fixed   : عناصر fixed همواره در محل خود باقی می مانند حتی اگر سند scroll شود.

اکنون به شرح هر یک از مقادیر بالا پرداخته و برای هر یک مثالی می آوریم:

مقدار Static

همانطور که بیان شد، مقدار static تأثیری بر روی عنصر نداشته و همان حالت default عناصر می باشد، بجز در عناصر فهرست ها (ul ,ol ,li ) . مقدار پیش فرض برای عناصر فهرست ها   none  است، اما اگر برای عناصر فهرستها از مقدار static استفاده کنیم حالت تو در توی آن ها از بین خواهد رفت.

نکته : این حالت که قبلاً به وجود می آمد، با آمدن css3 مقدار none برای خصوصیت position  برداشته شد و دیگر این حالت در مرورگر های جدید برای فهرست ها به وجود نمی آید و فهرست ها نیز مقدار پیش فرض static را دارا می باشند.

Offset Property

عناصری که مقدار relative , absolute  و یا fixed را دارا می باشند را می توان با استفاده از offset property ها، ( همان (left, top , bottom ,right تعیین موقعیت نمود.

مقدار Relative

مقدار Relative، موقعیت یک عنصر نسبت به عنصر والد را در صفحه تعیین می نماید و نقطه ارجاع (نقطه شروع حرکت عنصر) از مختصاتی که عنصر پدر دارد شروع خواهد شد. به عبارتی دیگر عنصر از محلی که در آن قرار دارد شروع به مختصات گیری می کند. به مثال زیر دقت نمایید تا با این حالت بیشتر آشنا شوید:

مثال برای مقدار relative :

کد html :

 

1 <div class="father">
2     <div class="children"> </div>
3 </div>

و کد css :

1 * {
2    margin: 0;
3    padding: 0;
4 }
5 body {
6     width: 500px;
7     margin: 10px auto;
8 }
9 div.father {
10     width: 400px;
11     height: 300px;
12     margin: 0 auto;
13     border: 4px solid green;
14 }
15 div.children {
16     width: 150px;
17     height: 150px;
18     background: #09f;
19     border: 3px solid red;
20 }

نتیجه در مرورگر: ( بدون مختصات دهی)

positioning <a  style=آموزش CSS (فصل هشتم) : تعیین موقعیت عناصر " title="positioning" width="544" height="463" />

حال style عنصر div.children را به مقدار زیر تغییر می دهیم

1 div.children {
2     width: 150px;
3     height: 150px;
4     background: #09f;
5     border: 3px solid red;
6     position: relative;
7     top: 10px;
8     right: 20px;
9 }

نتیجه در مرورگر :

position relative <a  style=آموزش CSS (فصل هشتم) : تعیین موقعیت عناصر " title="position-relative" width="544" height="463" />

مقدار absolute

مقدار absolute موقعیت یک عنصر را نسبت به پنجره مرورگر تعیین می نماید. یعنی نقطه آغاز عنصر از یکی از گوشه های پنجره (با توجه به خصوصیتی که تعیین خواهیم کرد) خواهد بود. به مثال زیر دقت کنید :

 

مثال:

کد html  :

1 <div class="father">
2     <div class="children"> </div>
3 </div>

و کد css :

1 * {
2     margin: 0;
3     padding: 0;
4 }
5 body {
6     width: 500px;
7     margin: 10px auto;
8 }
9 div.father {
10     width: 400px;
11     height: 300px;
12     margin: 0 auto;
13     border: 4px solid green;
14 }
15 div.children {
16     width: 150px;
17     height: 150px;
18     background: #09f;
19     border: 3px solid red;
20     position: absolute;
21     top: 10px;
22     right: 20px;
23 }

نتیجه در مرورگر :

position absolute <a  style=آموزش CSS (فصل هشتم) : تعیین موقعیت عناصر " title="position-absolute" width="557" height="454" />

مشاهده می کنید که نقطه شروع حرکت عنصر دیگر وابسته به عنصر والد (مربع سبز) نمی باشد و با توجه به خصوصیت top و right که تعیین نموده ایم، عنصر از گوشه سمت راست و بالای مرورگر شروع به حرکت نموده است.

مقدار fixed

مقدار fixed موقعیت عنصر را همانند مقدار absolute وابسته به صفحه مرورگر می نماید، یعنی نقطه شروع حرکت عنصر از یکی از گوشه های پنجره مرورگر خواهد بود با این تفاوت که عنصری با مقدار fixed پس از موقعیت دهی به آن، همیشه در محل خود باقی می ماند، حتی اگر صفحه scroll شود.

(مانند دکمه های اشتراک گذاری که در سمت راست مطلب مشاهده می کنید.)

تا به اینجا با نحوه تعیین موقعیت عناصر، و مختصات دهی به آن ها آشنا شدید، در ادامه با طریقه نمایش عناصر (display) و طریقه لایه دهی

  (z-index) آشنا می شویم.

 

ارسال نظر