CSS آموزش - خواص پيشرفته - تنظيم موقعيت عناصر و ساير خواص CSS

خواص پيشرفته CSS

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

با مجموعه خواص ارائه شده در اين قسمت می توان مکان قرار گيری عناصر را در صفحه توسط CSS تنظيم کرد .
خواص ارائه شده دراين قسمت در ليست زير قرار دارند . برای درياقت اطلاعات درباره هر کدام بر روی نام آن کليک کنيد :

left
right
top
bottom

overflow
vertical-align
z-index

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

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

نکات :

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

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

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

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

< 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 : در اين حالت نيز مرورگر به طور اتوماتيک در صورت نياز در 2 جهت نوار پيمايش قرار می دهد .

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

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 تعيين کرد .

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

< 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 تنظيم شده باشد .