قالب وردپرس قالب وردپرس آموزش وردپرس قالب فروشگاهی وردپرس وردپرس
خانه / اموزش / html/css / خواص تنظيم موقعيت عناصر در CSS

خواص تنظيم موقعيت عناصر در CSS

خواص تنظيم موقعيت عناصر در CSSReviewed by سالار on Apr 24Rating: 5.0

خواص تنظيم موقعيت عناصر در CSS :

در بخش خاصيت position در صفحه قبل ، اشاره کرديم چنانچه خاصيت position بر روی يکی از مقادير relative , absolute يا fixed تنظيم شود می توان توسط خواص left , right , top و bottom مختصات دقيق محل قرار گيری عنصر را در صفحه يا عنصر در بر گيرنده آن تعيين کرد . در اين بخش به معرفی ۴ خاصيت اشاره شده برای تنظيمات مکان قرار گيری عناصر می پردازيم :

نکات :

  1. در صورتی که خاصيت position بر روی مقدار static تنطيم شده باشد ، تعيين مختصات برای عناصر بي اثر بوده و مرورگر عناصر را در مکان مورد نظر خود بر حسب محتويات صفحه نمايش می دهد .
  2. در حالتی که خاصيت position بر روی مقدار relative تنظيم شود ، مختصات تعيين شده در اين قسمت ، نسبت به عنصر در برگيرنده عنصر مورد نظر محاسبه می شود . ولی در حالت هايي که خاصيت position بر روی مقادير absolute يا fixed تعيين شده باشد ، مختصات نقاط شروع نسبت به کل صفحه در نظر گرفته می شود .

برای درک بهتر به مثال های خاصيت position در صفحه قبل دقت کنيد .

نام خاصيت نوع خاصيت شرح
left auto
length
درصد %
مختصات نقطه شروع عنصر را از سمت چپ در صفحه يا عنصر در برگيرنده عنصر مورد نظر را به يکی از روش های زير تعيين می کند :
– auto : در اين حالت مرورگر به صورت اتوماتيک بر حسب محتويات صفحه ، نقطه شروع سمت چپ عنصر را تنظيم می کند .
– length : در اين حالت مختصات نقطه شروع عنصر را در سمت چپ بر حسب واحدی مثل پيکسل ( px ) يا نقطه ( pt ) تعيين می کنيم .
– درصد % : در اين حالت بر حسب درصد تعيين شده از کل عرض عنصر ، به عنوان نقطه شروع عنصر در سمت چپ تعيين می شود . برای مثال اگر مقدار ۱۰% تعيين شود و عرض کل عنصر ۲۰۰px باشد ، نقطه شروع ۲۰px از سمت چپ تعيين می شود .
right auto
length
درصد %
مختصات نقطه شروع عنصر را از سمت راست در صفحه يا عنصر در برگيرنده عنصر مورد نظر را به يکی از روش های زير تعيين می کند :
– auto : در اين حالت مرورگر به صورت اتوماتيک بر حسب محتويات صفحه ، نقطه شروع سمت راست عنصر را تنظيم می کند .
– length : در اين حالت مختصات نقطه شروع عنصر را در سمت راست بر حسب واحدی مثل پيکسل ( px ) يا نقطه ( pt ) تعيين می کنيم .
– درصد % : در اين حالت بر حسب درصد تعيين شده از کل عرض عنصر ، به عنوان نقطه شروع عنصر در سمت راست تعيين می شود . برای مثال اگر مقدار ۱۰% تعيين شود و عرض کل عنصر ۲۰۰px باشد ، نقطه شروع ۲۰px از سمت راست تعيين می شود .
top auto
length
درصد %
مختصات نقطه شروع عنصر را از سمت بالا در صفحه يا عنصر در برگيرنده عنصر مورد نظر را به يکی از روش های زير تعيين می کند :
– auto : در اين حالت مرورگر به صورت اتوماتيک بر حسب محتويات صفحه ، نقطه شروع را از سمت بالای عنصر تنظيم می کند .
– length : در اين حالت مختصات نقطه شروع عنصر را در سمت بالا بر حسب واحدی مثل پيکسل ( px ) يا نقطه ( pt ) تعيين می کنيم .
– درصد % : در اين حالت بر حسب درصد تعيين شده از کل ارتقاع عنصر ، به عنوان نقطه شروع عنصر در سمت بالا تعيين می شود . برای مثال اگر مقدار ۱۰% تعيين شود و ارتفاع کل عنصر ۲۰۰px باشد ، نقطه شروع ۲۰px از سمت بالا تعيين می شود .
bottom auto
length
درصد %
مختصات نقطه شروع عنصر را از سمت پايين در صفحه يا عنصر در برگيرنده عنصر مورد نظر را به يکی از روش های زير تعيين می کند :
– auto : در اين حالت مرورگر به صورت اتوماتيک بر حسب محتويات صفحه ، نقطه شروع را از سمت پايينی عنصر تنظيم می کند .
– length : در اين حالت مختصات نقطه شروع عنصر را در سمت پايين بر حسب واحدی مثل پيکسل ( px ) يا نقطه ( pt ) تعيين می کنيم .
– درصد % : در اين حالت بر حسب درصد تعيين شده از کل ارتقاع عنصر ، به عنوان نقطه شروع عنصر در سمت پايين تعيين می شود . برای مثال اگر مقدار ۱۰% تعيين شود و ارتفاع کل عنصر ۲۰۰px باشد ، نقطه شروع ۲۰px از سمت پايين تعيين می شود .

مثال : در مثال زير برای جدول مقدارهای top و left را تعيين کرده ايم . دقت کنيد که مقدار خاصيت position بروری relative تنظيم شده و مختصات مکان جدول با توجه عنصر در بر گيرنده آن يعنی خانه جدول تنظيم می شود :

Example
< table style=”border: solid 2px blue; width: 200px; height: 100px; top: 25px; left: 200px; position: relative” cellspacing=”0″ >
  < tr >
    < td style=”border: solid 2px blue” >
      Cell 1
< /td >
< td style=”border: solid 2px blue” >
      Cell 2
< /td >

< /tr >

< /table >
کد
Cell 1 Cell 2
خروجی

 


خاصيت overflow

نام خاصيت نوع خاصيت شرح
overflow visible
hidden
scroll
auto
توسط اين خاصيت تعيين می شود که چنانچه محتويات يک عنصر از عرض يا طول تعيين شده برای آن بيشتر شد ، مرورگر برای نمايش قسمت اضافه چه کاری انجام دهد ، که می تواند يکی از حالت های زير باشد :
– visible : در اين حالت ، قسمت اضافه نيز درون عنصر نمايش داده شده و عرض و طول آن به اندازه ای که کل محتويات را درون خود جای دهد ، افزايش می يابد .
– hidden : در اين حالت ، فقط به اندازه تعيين شده برای عنصر از محتويات آن نمايش داده می شود و قسمت اضافه مخفی می ماند .
– scroll : در اين حالت ، مرورگر به طور اتوماتيک در جهت هايي که نياز به افزايش اندازه عنصر برای مشاهده قسمت های اضافه است ، نوار پيمايش قرار می دهد و فقط به اندازه واقعی عنصر در هر لحظه از محتويات آن را نمايش می دهد .
– auto : در اين حالت نيز مرورگر به طور اتوماتيک در صورت نياز در ۲ جهت نوار پيمايش قرار می دهد .

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

Example
حالت visible

نکته : می بينيم که در اين حالت عرض پاراگراف از انداره واقعی بيشتر شده تا کل محتويات را نمايش دهد .

< p style=”width: 120px; height: 50px; overflow: visible” >
DeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudio
< /p >
کد
DeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudio خروجی
حالت hidden

نکته : در اين حالت عرض و ارتفاع پاراگراف از انداره واقعی بيشتر نشده و محتويات اضافه نمايش داده نشده است .

< p style=”width: 120px; height: 50px; overflow: hidden” >
DeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudio
< /p >
کد
DeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudio خروجی
حالت scroll و auto

نکته : می بينيم که در اين حالت برای نمايش محتويات اضافه از نوار پيمايش استفاده شده و عنصر در اندازه واقعی خود نمايش داده می شود .

< p style=”width: 120px; height: 50px; overflow: scroll” >
DeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudio
< /p >
کد
DeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudio خروجی

 


خاصيت vertical-align

نام خاصيت نوع خاصيت شرح
vertical-align baseline
top
text-top
middle
sub
super
bottom
text-bottom
length
اين خاصيت نحوه تراز بندی عمودی عنصر را در عنصر در برگيرنده آن تعيين می کند ، که می تواند يکی از حالت های زير باشد :
– baseline , top , text-top : عنصر در بالای عنصر در برگيرنده آن قرار می گيرد .
– middle : عنصر در وسط عنصر در برگيرنده آن قرار می گيرد .
– sup : عنصر به صورت زير نويس ( در پايين )عنصر در بر گيرنده آن قرار می گيرد .
– super : عنصر به صورت بالا نويس ( در بالای )عنصر در بر گيرنده آن قرار می گيرد .
– bottom , text-bottom : عنصر در پايين عنصر در برگيرنده آن قرار می گيرد .
– length : در اين حالت می توان مکان قرار گيری عمودی عنصر را از بالا ، بر حسب واحدی مثل px يا pt تعيين کرد .

مثال : در مثال زير در خانه های مختلف جدول ارائه شده ، برخی از حالت های تراز بندی عمودی متن را نمايش داده ايم :

Example
< table style =”width : 600px; height: 80px” >
< tr >
    < td style=”vertical-align: baseline ” >   baseline   < /td >
    < td style=”vertical-align: top” >   top , text-top   < /td >
    < td style=”vertical-align: middle” >   middle   < /td >
< td style=”vertical-align: bottom” >   bottom , text-bottom   < /td >
< /tr >
< /table >
کد
baseline top , text-top middle bottom , text-bottom
خروجی

 


خاصيت z-index

نام خاصيت نوع خاصيت شرح
z-index number
عدد
اين خاصيت يک شماره منحصر به فرد برای ترتيب قرار گيری عناصری که بر روی هم هستند ، استفاده می شود که عنصر با شماره بزرگتر در بالای عنصر ديگر قرار می گيرد . اين خاصيت فقط در زمانی کاربرد دارد که خاصيت positon عنصر بر روی مقدار relative يا absolute تنظيم شده باشد .

مطلب پیشنهادی

پیکر بندی محصولات ووکامرس [ جلسه دوم ]

پیکر بندی محصولات ووکامرس [ جلسه دوم ]Reviewed by سالار on Nov 16Rating: 5.0سلام به …

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

در خبرنامه ما عضو شوید

در خبرنامه ما عضو شوید

در خبرنامه ما عضو شوید تا بهترین پست هفته مارو در ایمیل خودتون دریافت کنید :)

تبریک ! شما عضو خبرنامه ما شدید