تماس با ما

موبایل: 2565 038 0912

دفتر تهران: 2565 2842 021

دفتر گرگان: 2565 3233 017


از جمله مباحث پیشرفته در زمینه استایل نویسی وب با CSS، بحث استفاده از position  و float برای شناور کردن عناصر مختلف در صفحات به نحو دلخواه و مورد انتظار است، آشنایی با این خاصیت ها را می توان نقطه آغاز استایل نویسی حرفه ای برشمرد چرا که معمولا در بسیاری از جلوه های ویژه و امکانات مورد نیاز برای ساخت واسط کاربری (UI یا User Interface) مناسب در صفحات وب، ناگزیر، این خواص استاندارد استفاده خواهند شد، به طور مثال منو های طراحی شده با CSS، باکس های شناور و واکنش پذیر (Interactive)، افزونه ها و widget ها و...، لذا در ادامه آموزش های مقدماتی قصد داریم در حد امکان به دو خاصیت position  و float بپردازیم.
خاصیت position
همان طور که پیش از این اشاره شد، خاصیت position جزء خاصیت های کلیدی و حرفه ای در CSS محسوب می شود، این خاصیت امکان تعریف و استقرار عناصر به صورت شناور یا ثابت در هر نقطه از صفحه نمایش (در چهار جهت اصلی) را میسر می کند که در طراحی وب بسیار کاربرد دارد، position مقادیر متعددی به شرح زیر می پذیرد:
absolute : مقادیر absolute یا مطلق به معنی موقعیت عنصر از بالاترین تگ والد (معمولا body یا سند HTML) است.
relative : مقادیر relative یا نسبی به معنی موقعیت عنصر از تگ والد (تگی که عنصر، فرزند آن محسوب می شود) است.
fixed : مقادیر fixed یا تثبیت شده به معنی ثابت شدن موقعیت عنصر در محلی تعریف شده است (که حتی با اسکرول نیز تغییر نخواهد کرد).
static : مقادیر static یا ایستا حالت پیش فرض عناصر در صفحات وب است که در واقع با این خاصیت، موقعیت یک عنصر در کنار سایر عناصر موجود در صفحات HTML پردازش می شود.
در ادامه هر یک از مقادیر بالا را همراه با مثال بررسی خواهیم کرد.
position absolute
از position با مقادیر absolute زمانی استفاده می کنیم که بخواهیم یک عنصر (به فرض بلاک div) نسبت به کل صفحه به صورت شناور کامل درآید، در این حالت عنصر به صورت پیش فرض به ابتدای سند HTML (گوشه بالای مرورگر) منتقل می شود و برای تنظیمات بیشتر می توان از خاصیت های left، right، top و bottom استفاده کرد، به مثال زیر توجه کنید.

.block{
    position:absolute;
    width:200px;
    height:100px;
    background:#9C0;
}


و مثالی که در آن از خاصیت های left و top استفاده شده:


.block{
    position:absolute;
    width:200px;
    height:100px;
    background:#9C0;
    top:200px;
    left:0px;
}
<div class="block">بلاک با خاصیت position absolute</div>

position relative
از position با مقادیر relative زمانی استفاده می کنیم که بخواهیم یک عنصر نسبت به تگ والد خود به حالت شناور درآید، به فرض اگر دکمه ای داریم که می خواهیم با کلیک بر روی آن، یک باکس در زیر دکمه ظاهر شود، در این حالت باید از مقادیر relative استفاده کنیم، به مثال زیر توجه کنید.

.parent{
    position:absolute;    
    top:400px;
    width:200px;
    height:100px;
}
.block{
    position:relative;
    width:200px;
    height:100px;
    background:#F90;
    border:1px solid #999;
    right:40px;
}
<div class="parent">
<div class="block">بلاک با خاصیت position relative</div>
</div>


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

.block{
    position:fixed;
    width:200px;
    height:100px;
    background:#39F;
    border:1px solid #999;
    right:40px;
}
<div class="block">بلاک با خاصیت position fixed</div>


position static
از position با مقادیر static زمانی استفاده می کنیم که بخواهیم یک عنصر به صورت پیش فرض و طبیعی در کنار سایر عناصر موجود در سند HTML پردازش شود، البته این مقدار چندان کاربردی نیست و کمتر استفاده می شود، چون بدون استفاده از آن نیز، عناصر به صورت static پردازش می شوند (مگر اینکه بخواهید خاصیتی که پیش تر به یک عنصر داده شده را دوباره نویسی و به حالت پیش فرض تغییر دهید که به این حالت در اصطلاح override می گویند).
خاصیت float
در کنار خاصیت position که می توان با آن یک عنصر را در راستای محور X ها و Y ها (کل صفحه) شناور کرد، خاصیت دیگری به نام float وجود دارد که برای شناور کردن عنصر در راستای محور X ها (محور افقی) به کار می رود، به فرض اگر بخواهیم یک بلاک به سمت چپ یا راست متمایل باشد، از float با مقادیر left یا right استفاده می کنیم، به مثال زیر توجه کنید.
مثال:

.block{
    width:200px;
    height:100px;
    background:#39F;
    border:1px solid #999;
    float:left;
}
<div class="block">بلاک با خاصیت float left</div>


در زیر شرح مختصر مقادیری که float می پذیرد را بررسی می کنیم.
right : از float با مقادیر right زمانی استفاده می کنیم که بخواهیم عنصر (به فرض بلاک div) به سمت راست صفحه متمایل شود.
left : از float با مقادیر left زمانی استفاده می کنیم که بخواهیم عنصر به سمت چپ صفحه متمایل شود.
none : از float با مقادیر none زمانی استفاده می کنیم که بخواهیم مقادیر پیشین مربوط به float را برای یک عنصر دوباره نویسی و خنثی کنیم، در واقع این حالت پیش فرض float است.
نکته 1: در استایل نویسی کاربردی، معمولا مواردی پیش می آید که در کنار استفاده از float ناچاریم از clear با مقادیر both نیز برای همپوشانی بلاک های تو در تو استفاده کنیم.
نکته 2: برای چینش بلاک ها در کنار هم و در یک ردیف افقی، معمولا علاوه بر خاصیت float، از display با مقادیر inline-block نیز استفاده می شود (جهت سازگاری با برخی مرورگرها).


سفارش طراحی سایت

سفارش طراحی سایت

google
yahoo
alexa
ebook
Baidu.com
Wikipedia
Blogger.com
Windows Live
Amazon.com
eBay
Bing
Ask
استانداری گلستان
f shdj, sefaresh, sefaresh .net, sefaresh.net, sthva, sthva nhj kj, sthva.kj, stthva.kj, xvhpd, آیفون, استفاده, اندروید, اپل, اپلیکیشن, اینترنت, باتری, بازار, بازی, دستگاه, دوربین, سامسونگ, سفارش, سفارش دات نت, سفارش دات نت sefaresh.net, سفارش.نت, سیستم, طراح وب, طراحي وب سايت, طراحی, طراحی وب سایت, فناوری, مایکروسافت, موبایل, هوشمند, کاربران, کمپانی, گلکسی, گوشی, گوشی هوشمند, گوگل

نمایش تمامی تگ ها
بسته ویژه مدارس مدارس
بسته ویژه پزشکان پزشکان
بسته ویژه مهندسین مهندسین