محل قرارگیری عناصر با خواص float و clear

در این مقاله با دو مبحث یعنی ویژگی Float و Clear در CSS و موضوع محل قرارگیری عناصر با خواص float و clear آشنا می شویم، با ما همراه باشید.

محل قرارگیری عناصر با خواص float و clear

امروز قصد بیان سه ویژگی مهم و کاربردی در CSS رو داریم. برای آشنایی کامل با Property های position و float ،clear تا انتهای مطلب با تیم طراحی سایت اصفهان وب یار همراه باشید.

خاصیت position در ویژگی Float و Clear در CSS

خاصیت position برای تعیین موقعیت عناصر در یک صفحه تعیین می شود؛ هم چنین با استفاده از این ویژگی می توانید عناصر را در صفحه وب پشت سر هم قرار دهید .

ویژگی position دارای 4 مقدار اصلی می باشد که هر کدام دارای کاربرد مخصوص به خود است.در ادامه به بررسی چهار مقداری که ویژگی position دارد، می پردازم.

• Static

تمام عناصر HTML به طور پیش فرض دارای مقدار استاتیک هستند به عبارتی نوشتن و یا ننوشتن مقدار static در هنگام کد نویسی تاثیری نخواهد داشت و عناصر در همان محلی که هستند نمایش داده می شوند. عناصری که از ویژگی static استفاده می کنند از ویژگی های top و right ,bottom ,left تبعیت نمی کنند.

• Fixed

عناصری که مقدار position آن ها fixed می باشد حتی در صورت Scroll خوردن صفحه و یا تغییر اندازه پنجره مرورگر در موقعیت خود قرار خواهند گرفت و موقعیت آن ها نسبت به قبل هیچ تغییری نخواهد کرد.

• Relative

عناصری که به صورت  Relative مقدار دهی می شوند نسبت به موقعیت فعلی خود موقعیت دهی می شوند به عبارتی می تواند نسبت به محل قرار گیری طبیعی خود تغییر مکان دهد.

• Absolute

موقعیت دهی عناصر به صورت Absolute مشخص می کند که عنصر مشخص شده در محل تعیین شده نشان داده شود نه محلی که کد مربوط به آن نوشته شده است . مقدار Absolute دارای خاصیت ارث بری می باشد.

• Overlapping elements

خاصیت z-index ترتیب قرار گیری عناصر را مشخص می کند. به عبارتی کدام عنصر باید جلو یا پشت عنصر دیگر قرار گیرد. دقت کنید که خصوصیت z-index فقط در مواقعی کار می کند که عنصر با استفاده از خصوصیت position مکان دهی شده باشد. شکل زیر به فهم شما از متن فوق کمک می کند.

خاصیت float

Float در لغت به معنای شناور بودن می باشد. یکی از پرکاربردترین Property در طراحی سایت ویژگی float می باشد. با استفاده از این خاصیت می توانید موقعیت عناصر را به سمت راست یا چپ تنظیم کنید. با این روش می توان به قرار گیری عناصر در کنار یک دیگر کمک کرد. خاصیت float دارای دو مقدار می باشد.

• Right

عنصر شناور به سمت راست است

• Left

عنصر شناور به سمت چپ می باشد

خاصیت clear

ویژگی clear به طور مستقیم با ویژگی float کار می کند. کار این عنصر پاک سازی اطراف عنصر شناور به منظور جلوگیری از سقوط سایر عناصر به پایین عنصر شناور می باشد.

خاصیت  clear از والد خود تبعیت نمی کند به عبارتی دارای خاصیت ارث بری نیست.

ویژگی clear دارای مقدار both می باشد به این معنا که هیچ عنصر در سمت راست و چپ عنصر شناور قرار نداشته باشند. دو مقدار دیگری که ویژگی clear  دارا می باشد clear:right به معنی پاکسازی سمت راست عنصر شناور و clear:left به معنای پاکسازی سمت چپ عنصر شناور می باشد. clear:none  یکی دیگر از مقادیر پیش فرض این خاصیت می باشد که تمام عناصر به طور پیش فرض دارای clear:none هستند.

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