سلام ، حالتون چطوره؟ امیدوارم که سلامت باشید.درمورد css میخوام براتون کمی توضیح بدم .با ماهمراه باشید.از جمله مباحث پیشرفته در زمینه استایل نویسی وب با 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;
}
برای دیدن مثال با پیش نمایش آنلاین، به انتهای مطلب مراجعه کنید.
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;
}
توضیح: اگر در کلاس های بالا دقت کنید، برای تبعیت یک بلاک فرزند از بلاک والد خود، به بلاک فرزند خاصیت position با مقادیر relative اختصاص می دهیم، در این حالت هر کجا که بلاک والد قرار داشته باشد، بلاک فرزند نیز خاصیت های خود را از همان نقطه پردازش می کند، به فرض در حالت معمول خاصیت right از تگ body محاسبه می شود، اما برای بلاک های relative این خاصیت از تگ والد حساب می شود.
position fixed
از position با مقادیر fixed زمانی استفاده می کنیم که بخواهیم یک عنصر به صورت ثابت در یک قسمت از صفحه نمایش قرار گیرد و حتی با اسکرول نیز تغییری نکند، به عنوان مثال این شیوه ای است که برخی طراحان قالب از آن در کدنویسی های خود (معمولا بیشتر در قالب وبلاگ ها) برای ثابت کردن تصویر پس زمینه استفاده می کنند، به مثال زیر توجه کنید.
.block{
position:fixed;
width:200px;
height:100px;
background:#39F;
border:1px solid #999;
right:40px;
}
برای دیدن مثال با پیش نمایش آنلاین، به انتهای مطلب مراجعه کنید.
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;
}
در زیر شرح مختصر مقادیری که float می پذیرد را بررسی می کنیم.
right : از float با مقادیر right زمانی استفاده می کنیم که بخواهیم عنصر (به فرض بلاک div) به سمت راست صفحه متمایل شود.
left : از float با مقادیر left زمانی استفاده می کنیم که بخواهیم عنصر به سمت چپ صفحه متمایل شود.
none : از float با مقادیر none زمانی استفاده می کنیم که بخواهیم مقادیر پیشین مربوط به float را برای یک عنصر دوباره نویسی و خنثی کنیم، در واقع این حالت پیش فرض float است.
نکته ۱: در استایل نویسی کاربردی، معمولا مواردی پیش می آید که در کنار استفاده از float ناچاریم از clear با مقادیر both نیز برای همپوشانی بلاک های تو در تو استفاده کنیم.
نکته ۲: برای چینش بلاک ها در کنار هم و در یک ردیف افقی، معمولا علاوه بر خاصیت float، از display با مقادیر inline-block نیز استفاده می شود (جهت سازگاری با برخی مرورگرها).
مثال و پیش نمایش آنلاین
برای آشنایی بیشتر با خاصیت position و float، در زیر مثال و پیش نمایش آنلاین این خاصیت ها را بررسی می کنیم.
body{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
direction:rtl;
height:1500px;
}
.position-absolute{
position:absolute;
height:100px;
width:200px;
background:#9C3;
bottom:50px;
left:0px;
}
.position-parent{
position:absolute;
height:50px;
width:50px;
background:#CCC;
top:400px;
right:50px;
}
.position-relative{
position:relative;
height:100px;
width:200px;
background:#FC0;
margin-top:30px;
}
.position-fixed{
position:fixed;
height:100px;
width:200px;
background:#69F;
top:50px;
left:0px;
}
.float-parent{
width:300px;
height:130px;
border:1px solid #CCC;
}
.float-right-1{
width:100px;
height:100px;
background:#FC0;
float:right;
}
.float-right-2{
width:100px;
height:100px;
background:#F90;
float:right;
}
.float-right-3{
width:100px;
height:100px;
background:#F60;
float:right;
}
.float-clear{
clear:both;
}
چینش بلاک ها در کنار هم با خاصیت float
