جلسه دوازدهم: Position در CSS

جلسه دوازدهم: Position در CSS
5 (100%) 1 vote
جلسه دوازدهم: Position در CSS
5 (100%) 1 vote

position in CSSتا حالا به این فکر کردید که اگر بخواهیم یک عکس را در صفحه جا به جا کنیم چه کاری باید انجام بدیم؟؟؟؟ یا اینکه چگونه مکان یک Content را تغییر دهیم؟؟؟ آیا استایل خاصی برای اینکار وجود دارد یا از طریق padding و margin باید مکان آن ها را تعیین نمود؟؟؟

در این آموزش ما می خواهیم نحوه ی جاگذاری عناصر در وب سایت را توضیح دهیم تا شما عزیزان بتوانید عناصر سایت را در مکان مورد نظر خود قرار دهید.

 

Position چیست؟

برای تعیین موقعیت مکانی یک عنصر درون صفحه از ویژگی Position استفاده می شود همچنین از طریق این ویژگی می توانید تعیین کنید که عناصر در یک صفحه بر روی یکدیگر نیز قرار بگیرند.

همچنین با استفاده از این ویژگی می توانیم تعیین کنیم که عناصر در نقطه ای درون صفحه ثابت باشند و با اسکرول شدن هیچ تغییری در آن ها ایجاد نخواهد شد.

برای اینکه بتوانیم موقعیت عناصر در صفجه را مشخص کنیم کافیست مقادیر top، right، bottom، left را مشخص کنیم معمولا این اعداد به px می باشند.

نکته: تا زمانی که از ویژگی پوزیشن استفاده نکنیم جهت دهی هایی که در بالا گفتیم بی اثر خواهند بود.

نکته: حتما نباید اعداد به px باشند می توانند به صورت % یا واحد های دیگر نیز نوشته شوند.

انواع Position

استایل Position عموما دارای پنج attribute می باشد که عبارتند از:

  1. Position static
  2. position relative
  3. position absolute
  4. position fixed
  5. Position sticky

ویژگی Position static

ویژگی Position static به صورت پیشفرض بر روی تمامی عناصر وجود دارد و باعث می شود ویژگی های top، right، bottom، left و z-index بر روی موقعیت عناصر تاثیری نداشته باشند و نتوانند باعث تغییرمکان این عناصر شوند.

عموما ما از استایل پوزیشن در زمانی استفاده می شود که بخواهیم ویژگی بالا استفاده کنیم و آن را به attribute های sticky، fixed، absolute، relative تبدیل کنیم.

 

ویژگی position relative

زمانی که از ویژگی position relative استفاده می نماییم جسم با حفظ موقعیت قبلی خود به موقعیت جدیدی که ما به آن گفته ایم می رود. یعنی از موقعیت قبلی به عنوان یک مبدا مختصات استفاده می کند، زمانی که از این ویژگی استفاده می کنیم دو اتفاق میافتد که عبارتند از:

  1. این ویژگی یک دستگاه مختصات برای دسته ای از فرزندانش که دارای position absolute هستند ایجاد می کند.

نکته ی مهم: در این جا منظور ما این نیست که position absolute فرزند position relative است. منظور ما این است که اگر به یک کلاس position relative بدهیم و به کلاس های داخل آن position absolute بدهیم، کلاس های داخلی فرزند کلاس بزرگتر خواهند شد. (خودم میدونم پیچیده اس ولی همینه :))

  1. این ویژگی یک دستگاه مختصات هم برای خودش تعیین می کند که می تواند آن را به عنوان مبدا قرار داده و نسبت به آن جا به جا شود.

به نمونه کد زیر توجه کنید:

کد HTML:

<img src="image/img.jpg" alt="#">

<p>
به مکان این عکس <img src="image/img.jpg" alt="#"> در متن توجه کنید که از جای خود جا به جا شده است در حالی که جای قبلی آن خالی می باشد
</p>

کد CSS:


body {

  background-color: #eeeeee

}

p img {

  position: relative;

  left: 50px;

  top: 100px;

  opacity: 0.6

}

خروجی کد بالا:

position relative

ویژگی position absolute

 

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

البته لازم به ذکر است که این ویژگی ابتدا به پوزیشن  قبل خود مراجعه می کند و آن را به عنوان پوزیشن مادر انتخاب نموده و دستگاه مختصات خود قرار داده و نسبت به آن خود را تنظیم می کند اینقد به کلاسهای بالاتر مراجعه می نمیاد تا اینک یک پوزیشن بیابد و اگر وجود نداشته باشد خود را نسبت به صفحه تنظیم می نماید.

به نمونه کد زیر توجه کنید:

کد HTML:


 <p>
  عکس موجود در این صفحه باید در جای * <img src="image/img.jpg" alt="#"> قرار بگیرد اما دارای خاصیت position absolute می باشد
 </p>

کد CSS:


}

body {

  background-color: #eeeeee

}

p img {

  position: absolute;

  left: 70%;

  top: 10px;

  opacity: 0.6

}

خروجی کد بالا:

position absolute

ویژگی position fixed

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

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

به مثال زیر توجه کنید:

 

کد HTML:


<p>
    این عکس در قسمت چپ و بالای صفحه قرار می گیرد.
  </p>
<img src="image/img.jpg" alt="#">

کد CSS:


body {

  background-color: #eeeeee

}

img {

  position: fixed;

  left: 0px;

  top:0px;

}

خروجی کد بالا

 

position fixed

ویژگی position sticky

مبحث جدیدی که در استایل CSS ایجاد شده است ویژگی position sticky می باشد، این ویژگی در CSS3 اضاقه شده است که کاربرد جالبی دارد.

حالتی که ویژگی position sticky ایجاد می کند شبیه به ترکیبی از حالت های Relative و fixed می باشد به این گونه که تازمانی که عنصر مورد نظر ما اسکرول نشده باشد در ماکنی که ما تعریف کرده ایم قرار می گیرد امکا از زمانی که منو شروع به اسکرول شدن نمایید حرکت می نمایید تا به مکانی که ما برای عنصر تعریف کرده ایم برسد و در آنجا ثابت خواهد شد.

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

به نمونه کد زیر توجه کنید:

کد HTML:


 <p>
  این عکس زیر نوشته قرار دارد که پس از اسکرول شدن به بالای صفحه ی مرورگر ما می چسبد.
   </p>
<img src="image/img.jpg" alt="#">

کد CSS:


body {

  background-color: #eeeeee

}

img {

  position: sticky;

  left: 0px;

  top:0px;

z-index: 99

}

خروجی کد بالا:

position stiky

برای کسب اطلاعات بیشتر در زمینه ی position ها می توانید به لینک مقابل مراجعه کنید (برای استفاده از لینک کلیک نمایید)

خلاصه مطلب:

  1. برای تعیین موقعیت مکانی یک عنصر درون صفحه از ویژگی Position استفاده می کنیم.
  2. برای اینکه بتوانیم موقعیت عناصر در صفجه را مشخص کنیم کافیست مقادیر top، right، bottom، left را مشخص کنیم معمولا این اعداد به px می باشند.
  3. ویژگی Position static به صورت پیشفرض بر روی تمامی عناصر وجود دارد.
  4. زمانی که از ویژگی position relative استفاده می نماییم جسم با حفظ موقعیت قبلی خود به موقعیت جدیدی که ما به آن گفته ایم می رود.
  5. از ویژگی position absolute برای جا به جایی عناصر بدون در نظر گرفتن مکان قبلی آن ها استفاده می شود. (یعنی به صورت مستقل)
  6. از ویژگی position fixed برای ثابت شدن عناصر در وب سایت استفاده می شود به گونه ای که با اسکرول شدن تغییری ایجاد نشود.
  7. پر کاربرد ترین مواردی که ویژگی position fixed در آن استفاده می شود در منوی بالای صفحه یا قسمت کناری سایت می باشد.
  8. حالتی که ویژگی position sticky ایجاد می کند شبیه به ترکیبی از حالت های Relative و fixed می باشد.
ابوالفضل کلهری

فعال در زمینه های ui و ux و طراحی وب سایت مسلط به زبان های نشانه گذاری HTML و CSS و همچنین در زمینه ی آموزش زبان های HTML و CSS نیز فعالیت دارم . امیدوارم با آموزش هایی که در این سایت قرار می دهم موجب پیشرفت شما عزیزان باشم.

آخرین ارسالی های وبلاگ

لوگو

logo-samandehi

تاییدیه ها