کاربرد ویژگی position و float در CSS

خاصیت position

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

خاصیت position با مقادیر static

از خاصیت position با مقادیر static زمانی استفاده می کنیم که بخواهیم یک عنصر به صورت پیش فرض و نرمال در کنار سایر عناصر موجود در سند HTML پردازش شود، این مقدار چندان کاربردی نیست و کمتر استفاده می شود چرا که بدون استفاده از آن نیز عناصر صفحه وب به صورت Static پردازش می شوند، مگر اینکه بخواهیم خاصیتی که قبلا به یک عنصر داده شده است را دوباره نویسی و به حالت پیش فرض تغییر دهیم که به این حالت در اصطلاح برنامه نویسی Override می گویند.

<style>
.static {
    position: static;    
    width: 200px;
    height: 100px;
    background: #88C2FF;
}
</style>
<div class="static">بلاک با خاصیت position static</div>

برای بررسی مثال با پیش نمایش آنلاین، لطفا به انتهای این آموزش مراجعه کنید.

خاصیت position با مقادیر relative

از خاصیت position با مقادیر relative زمانی استفاده می کنیم که بخواهیم یک عنصر نسبت به محل قرارگیری نرمال خود در صفحه وب مقادیر مربوط به موقعیت را اعمال کند، به طور مثال اگر برای عنصر با خاصیت position و مقدار relative خاصیت top در نظر بگیریم، موقعیت عنصر از همان محلی که قرار دارد بر اساس مقدار top تغییر خواهد کرد.

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

برای بررسی مثال با پیش نمایش آنلاین، لطفا به انتهای این آموزش مراجعه کنید.
موقعیت قرارگیری عناصر دارای خاصیت position با مقادیر relative را می توانیم با خاصیت های top، right، bottom، left تغییر دهیم، همچنین امکان اعمال خاصیت z-index بر روی این عناصر وجود دارد.

خاصیت position با مقادیر absolute

از خاصیت position با مقادیر absolute زمانی استفاده می کنیم که بخواهیم یک عنصر (به فرض بلاک div) نسبت به تگ والد خود یا نسبت به کل صفحه وب به صورت شناور درآید، در این حالت عنصر به صورت پیش فرض به ابتدای موقعیت بلاک والد یا سند HTML (گوشه بالای پنجره مرورگر) منتقل می شود و برای اعمال تغییرات سفارشی بیشتر می توانیم از خاصیت های top، right، bottom، left استفاده کنیم.

<style>
.relative {
    position: relative;
    width: 200px;
    height: 100px;
    background: #F90;
    border: 1px solid #999;
}
.absolute {
    position: absolute;
    width: 220px;
    height: 50px;
    background: #F90;
    border: 1px solid #999;
    top: 30px;
    left: -30%;
}
</style>
<div class="relative">
بلاک والد با خاصیت position relative
<div class="absolute">
بلاک فرزند با خاصیت position absolute
</div>
</div>

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

خاصیت position با مقادیر fixed

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

<style>
.fixed {
    position: fixed;
    width: 200px;
    height: 100px;
    background: #FF9A9B;
    border: 1px solid #999;
    top: 8px;
    left: 8px;
}
</style>
<div class="fixed">بلاک با خاصیت position fixed</div>

برای بررسی مثال با پیش نمایش آنلاین، لطفا به انتهای این آموزش مراجعه کنید.

خاصیت float

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

<style>
.block {
    width: 220px;
    height: 220px;
    background: #9EBBFF;
    border: 1px solid #999;
    text-align: justify;
    padding: 4px;
    top: 8px;
    left: 8px;
}
.float {
    width: 100px;
    height: 100px;
    background: #424AE4;
    color: #FFFFFF;
    float: left;
    padding: 4px;
    margin: 4px;
    text-align: right;
}
.rtl {
    direction: rtl;
}
</style>
<div class="block rtl">
<div class="float">بلاک مربوط به نمایش تصویر بندانگشتی در مطلب با خاصیت float و مقدار left</div>
<p>تفاوت خاصیت float با خاصیت position و مقادیر absolute در این است که با float عنصر صرفا در سمت چپ یا راست تگ والد خود شناور می شود اما همچنان بر روی موقعیت سایر عناصر مجاور تاثیرگذار است اما در مورد خاصیت position با مقادیر absolute عنصر به صورت کامل در سند HTML شناور می شود و بر روی موقعیت عناصر مجاور خود تاثیری ندارد.</p>
</div>

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

مثال و پیش نمایش آنلاین

برای آشنایی بیشتر با خاصیت های position و float در CSS، مثال و پیش نمایش آنلاین را با نمونه کد زیر بررسی می کنیم.

<!doctype html>
<html lang="fa">
<head>
<meta charset="utf-8">
<title>وبگو | استفاده از خاصیت position و float در CSS</title>
<!-- Webgoo.ir -->
<style>
body {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    direction: rtl;
    height: 1500px;
}
.static {
    position: static;    
    width: 200px;
    height: 100px;
    background: #88C2FF;
    margin: 4px;
}
.relative {
    position: relative;
    width: 200px;
    height: 100px;
    background: #F90;
    border: 1px solid #999;
    margin: 4px;
}
.absolute {
    position: absolute;
    width: 220px;
    height: 50px;
    background: #F90;
    border: 1px solid #999;
    top: 30px;
    left: -30%;
}
.fixed {
    position: fixed;
    width: 200px;
    height: 100px;
    background: #FF9A9B;
    border: 1px solid #999;
    top: 8px;
    left: 8px;
}
.block {
    width: 220px;
    height: 220px;
    background: #9EBBFF;
    border: 1px solid #999;
    text-align: justify;
    padding: 4px;
    top: 8px;
    left: 8px;
}
.float {
    width: 100px;
    height: 100px;
    background: #424AE4;
    color: #FFFFFF;
    float: left;
    padding: 4px;
    margin: 4px;
    text-align: right;
}
</style>
</head>
<body>
<div class="static">بلاک با خاصیت position static</div>
<div class="relative">
بلاک والد با خاصیت position relative
<div class="absolute">
بلاک فرزند با خاصیت position absolute
</div>
</div>
<div class="fixed">بلاک با خاصیت position fixed، برای بررسی بیشتر به پائین صفحه اسکرول کنید.</div>
<div class="block">
<div class="float">بلاک مربوط به نمایش تصویر بندانگشتی در مطلب با خاصیت float و مقدار left</div>
<p>تفاوت خاصیت float با خاصیت position و مقادیر absolute در این است که با float عنصر صرفا در سمت چپ یا راست تگ والد خود شناور می شود اما همچنان بر روی موقعیت سایر عناصر مجاور تاثیرگذار است اما در مورد خاصیت position با مقادیر absolute عنصر به صورت کامل در سند HTML شناور می شود و بر روی موقعیت عناصر مجاور خود تاثیری ندارد.</p>
</div>
</body>
</html>

پیش نمایش آنلاین