0 اسپیناس وب اسپیناس وب

افتخار طراحی سایت بیش از ۱۷۰۰ کسب و کار ایرانی و خارجی

نمونه کارها

آموزش CSS (فصل هفدهم) – تعیین موقعیت عناصر

نظاره گر پیشرفت کسب و کار خود باشید ، وقتی اسپیناس وب جرئی از تیم شما می شود

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

مقدار 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  در شرکت اسپیناس مشتری مداری حرف اول را می زند

درگ کنید مشاهده بستن پخش
0%