در این جلسه  طراحی سایت شما را با تعیین موقعیت عناصر آشنا می کنیم:

مقدار absolut

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

 

<div class="father">
 <div class="children"> </div>
 </div>

و کد css :

 

* {
 emargin: 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;
 position: absolute;
 top: 10px;
 right: 20px;
 }

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

مقدار fixed

این مقدار موقعیت عنصر را ھمانند مقدار absolute وابسته به صفحه مرورگر خواھد کرد، یعنی نقطه شروع حرکت عنصر
از یکی از گوشه ھای پنجره مرورگر خواھد بود با این تفاوت که عنصری با مقدار fixed پس از موقعیت دھی به آن ھمواره
در محل خود باقی می ماند، حتی اگر صفحه scroll شود.
(ھمانند دکمه ھای اشتراک گذاری که در سمت راست مطلب می بینید).
بسیار خب؛ تا به اینجا با نحوه تعیین موقعیت عناصر، و مختصات دھی به آن ھا آشنا شدید، در جلسه بعد با طریقه
نمایش عناصر (display) و طریقه لایه دھی (index-z) آشنا خواھیم شد

 

طراحی سایت اسپیناس همیشه سعی در استفاده از به روز ترین تکتینک ها و ابزارها در  طراحی سایت دارد  در اسپیناس از تکنولوژی ها روز دنیا مانند CSS3 , HTML5 , Jquery , JAVASCRIPT   در طراحی وب سایت استفاده می شود و همچنین زبانهایی مانند PHP , ASP  در شرکت اسپیناس مشتری مداری حرف اول را می زند

بارگذاری نوشته های مرتبط بیشتر
بارگذاری بیشتر در آموزش Css در طراحی سایت

پاسخ دهید

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

نوزده + 2 =

بررسی کنید

آموزش CSS (فصل بیستم) – آشنایی جلوه های ویژه ی CSS3

در این جلسه  طراحی سایت شما را با جلوه های ویژه ی CSS3 آشنا می کنیم: خاصیت transform شما م…