در این جلسه طراحی سایت شما را با تعیین موقعیت عناصر آشنا می کنیم:
موقعیت عناصر در صفحه
Positioning به شما این امکان را می دھد که موقعیت ھر عنصر را به دقت در یک سند مشخص کنید. می توان مشخص
کرد که موقعیت یک عنصر به عنصر پدر خود وابسته باشد یا به پنجره ی مرورگر. با استفاده از positioning می توان یک
عنصر را بر روی عنصر دیگر لایه بندی کرد. Positioning شامل خاصیت position و چھار مقدار top, bottom , right , left
می باشد که مختصات دقیق محل قرار گیری عنصر را میتوان با استفاده از آن ھا تعیین کرد.
خصوصیت position
این خاصیت به تنھایی کار خاصی را بر روی عنصر انجام نمی دھد. و ھمیشه به ھمراه خاصیت ھای left , right , left یا
top می آید،( و بلعکس) اما قبل از مقدار دھی به این خاصیت ھا در اول حتما باید به خصوصیت position یکی از چھار
مقدار زیر را داد:
Static : مقدار پیشفرض، و ھمان حالت عادی قرار گرفتن عناصر طبق ترتیبی که در سند HTML است می
باشد.
Relative : اجازه می دھد که یک سند در یک محل خاص از سند قرار گیرد، و وابسته به عنصر پدر می باشد.
Absolute : اجازه می دھد که یک سند در یک محل خاص از سند قرار گیرد، و وابسته به پنجره مرورگر می
باشد.
Fixed : عناصر fixed ھمواره در محل خود باقی می مانند حتی اگر سند scroll شود.
حال به تشریح ھر یک مقادیر فوق به ھمراه مثال می پردازیم:
مقدار Static
مقدار static ھمانطور که گفتیم تاثیری بر روی عنصر ندارد و ھمان حالت default عناصر می باشد، بجز در عناصر لیست
ھا (li, ol, ul ) . مقدار پیشفرض برای عناصر لیست ھا none است، اما اگر برای عناصر لیستھا از مقدار static استفاده
کنیم حالت تو در توی آن ھا از بین خواھد رفت.
نکته : این حالت قبلا به وجود می آمد اما پس از آمدن css3 مقدار none برای خصوصیت position برداشته شد و دیگر
ھمچین حالتی در مرورگر ھای جدید برای لیست ھا به وجود نمی آید و لیست ھا نیز مقدار پیشفرض static را دارند.
Offset Property
عناصری که مقدار absolute , relative و یا fixed را دارند را می توان با استفاده از property offset ھا، ( ھمان top ,left
right, bottom , ) تعیین موقعیت کرد.
مقدار Relative
این مقدار موقعیت یک عنصر نسبت به عنصر پدر را در صفحه تعیین می کند و نقطه ارجاع (نقطه شروع حرکت عنصر) از
مختصاتی که عنصر پدر دارد شروع خواھد شد. یا به عبارتی دیگر عنصر از محلی که در آن قرار دارد شروع به مختصات
گیری می کند. به مثال زیر دقت کنید تا با این حالت بیشتر آشنا شوید:
مثال برای مقدار relative :
کد html :
<div class="father">
<div class="children"> </div>
</div>
و کد css :
* {
margin: 0;
padding: 0;
}b
ody {
width: 500px;
margin: 10px auto;
}d
iv. father {
width: 400px;
height: 300px;
margin: 0 auto;
border: 4px solid green;
}d
iv. children {
width: 150px;
height: 150px;
background: #09f;
border: 3px solid red;
}حال style عنصر children.div را به مقدار زیر تغییر می دھیم
div. children {
width: 150px;
height: 150px;
background: #09f;
border: 3px solid red;
position: relative;
top: 10px;
right: 20px;
}می بییند که box ما از محلی که در آن قرار گرفته بود شروع به حرکت کردن کرده ، یعنی ۱۰px از سمت بالا فاصله
گرفت و ۲۰px از سمت راست فاصله گرفت.
نکته : استفاده از مقادیر منفی برای خصوصیات bottom , right , top , right مجاز می باشد
طراحی سایت اسپیناس همیشه سعی در استفاده از به روز ترین تکتینک ها و ابزارها در طراحی سایت دارد در اسپیناس از تکنولوژی ها روز دنیا مانند CSS3 , HTML5 , Jquery , JAVASCRIPT در طراحی وب سایت استفاده می شود و همچنین زبانهایی مانند PHP , ASP در شرکت اسپیناس مشتری مداری حرف اول را می زند
