0

هیچ محصولی در سبد خرید نیست.

طراحی سایت در اصفهان, سئو سایت اصفهان, ساخت سایت اصفهان, طراحی سایت حرفه ای اصفهان, بهینه سازی سایت , بازاریابی و دیجیتال مارکتینگ 09133886881 احمدپور

آموزش پوزیشن ها در CSS

نویسنده پشتیبانی وب یار
امتیاز مطلب
4/5 - (3 امتیاز)
تعداد بازدید 2816
تاریخ بروزرسانی ۴ اردیبهشت ۱۴۰۱

آموزش انواع پوزیشن در CSS

همان طور که می‌دانید برای تعیین موقعیت دقیق المان های html در صفحه وب از css استفاده می شود؛ اما گاهی در استفاده درست از پوزیشن ها در css دچار اشتباه می شویم و سردرگم می مانیم. تیم طراحی سایت اصفهان وب یار در این مقاله سعی در پرداختن به توضیح هر کدام از پوزیشن های css و کاربرد آن ها داشته است که امیدواریم نظر شما عزیزان را جلب کند؛ با ما همراه باشید.

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

پوزیشن ها برای استایل دهی استفاده می شوند. برای کاربرد position در css باید یک سری اطلاعات از flow عناصر در صفحه بدانید. مفهوم flow این است که وقتی در یک صفحه وب عناصر کنار هم قرار میگیرند پس به هم وابسته هستند و حذف یا اضافه یک عنصر روی سایر زنجیره تاثیر میگذارد

انواع position در css

  • 1- static
  • 2- relative
  • 3- absolute
  • 4- fixed
  • 5- sticky

 

پوزیشن استاتیک (Static Position)

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

HTML:

CSS:

 

نظم طبیعی صفحه از ترتیب تگ های html پیروی کرده و ایجاب می کند که ابتدا d1 قرار بگیرد، بعد از آن d2 می آید و سپس d3 در زیر d2 موقعیت دهی می شود. خروجی کد فوق به همراه مقداری استایل دهی به شکل زیر خواهد شد:

پوزیشن ها در css - استاتیک

پوزیشن ها در css – استاتیک (static)

 

نکته ها:

– اگر دقت کرده باشید ما در هیچ کدام از کدهای css خود از پوزیشن استفاده نکردیم زیرا به صورت پیش فرض، پوزیشن همه المان ها استاتیک است؛ یعنی نوشتن کد زیر یا ننوشتن آن تفاوتی ندارد.

– همانطور که در خروجی html مشاهده کردید، هر المانی که به شکل استاتیک پوزیشن دهی شده باشد، تمام عرض ممکن از صفحه را در بر می‌گیرد؛ مگر آن که از طرف Parent (پدر، والد یا جد) خود یا با دادن مقدار مشخصی به خاصیت width محدود شود.

– المان های با پوزیشن استاتیک، مقادیر top/bottom و left/right را نمی‌پذیرند. برای حل محدودیت فوق پوزیشن نسبی ساخته‌ شد که در ادامه می خوانید.

پوزیشن نسبی (Relative Position)

المان های با پوزیشن نسبی،  تمام خواص استاتیک بودن را دارند، به علاوه آنکه می‌توانند خاصیت های top/bottom و left/right را هم بگیرند. موقعیت عناصری که relative هستند، نسبت به حالتی که استاتیک باشند تنظیم می گردد. برای نمونه در مثال زیر می بینید که موقعیت d2 با top:10px و left:80px نسبت به گوشه پایین و سمت چپ d1 تنظیم شده است:

پوزیشن ها در css - نسبی (relative)

پوزیشن ها در css – نسبی (relative)

 

نکته ها:

– در حالت نسبی هم مانند استاتیک، عرض المان ها تا حد ممکن تمام فضای موجود را از آن خود می‌کند.
– برای اینکه d2 را بالاتر ببریم مثلاً بخواهیم از بالای صفحه به اندازه 10px فاصله داشته باشد باید محاسبه کنیم ارتفاع d1 چقدر است بعد 10 پیکسل از آن کم کنیم و حاصل را به صورت منفی به خاصیت top بدهیم:

پوزیشن ها در css - نسبی (relative)

پوزیشن ها در css – نسبی (relative)

 

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

 

پوزیشن آزاد (Absolute Position)

المان های دارای این پوزیشن، نسبت به اولین جدی که پوزیشن غیر استاتیک دارد موقعیت دهی می شوند و در صورتی که چنین جدی یافت نشد، موقعیتشان نسبت به کل داکیومنت و به شکل آزاد (absolute) تنظیم می شود. به مثال زیر دقت کنید:

HTML:

 

CSS:

پوزیشن ها در css - آزاد (absolute)

پوزیشن ها در css – آزاد (absolute)

 

چند نکته مهم در باره پوزیشن آزاد:

– اگر دقت کرده باشید متوجه شده اید که d3 نسبت به d2 تنظیم شده است؛ زیرا d2 اولین جد d3 است که پوزیشنی غیر از استاتیک دارد. اما d2 نسبت به کل داکیومنت تنظیم شده است.

– برخلاف پوزیشن های استاتیک و نسبی، درحالت عادی، عرض المان های دارای پوزیشن آزاد، به اندازه محتوای آن ها (بعلاوه padding و border) فضا اشغال می کند. هر کدام از پوزیشن ها اگر محتوایی نداشته باشند و مقادیر padding یا border و یا width برایشان ست نشده باشد، در صفحه وب اثری از آن ها دیده نخواهد شد.

– عناصر دارای پوزیشن آزاد در صورتی که خاصیت های top/bottom  و left/right برایشان ست نشده باشد، مانند حالت استاتیک موقعیت دهی می شوند.

پوزیشن ثابت (Fixed Position)

همانطور که از نامش پیداست، برای تعیین جایگاه ثابت المان ها به کار می‌رود و حتماً باید مقادیر top/bottom و left/right  برایش تعریف شود. این پوزیشن کاملاً آزاد است یعنی آن محدودیت پوزیشن آزاد را هم که نسبت به جد غیر استاتیک خود موقعیت دهی می‌شد، ندارد و تنها نسبت به صفحه مرورگر تنظیم می شود. برای مثال دکمه رفتن به بالای سایت را پوزیشن ثابت می دهند:

 

پوزیشن چسبنده (Sticky Position)

ترکیبی از دو پوزیشن نسبی و ثابت می باشد؛ چنین المانی با اسکرول کردن صفحه به سمت پایین به سقف مرورگر می چسبد (تا قبل از چسبیدن، پوزیشن نسبی دارد) و با اسکرول کردن بیشتر، همان جا ثابت می ماند (پوزیشن ثابت می گیرد). این نوع پوزیشن بیشتر برای منوها کاربرد دارد.

امیدواریم خواندن این مقاله به شفاف سازی و ابهام زدایی از ذهن شما همراهان همیشگی وب یار کمک کرده باشد؛ ما را با نظرات گرم خود خوشحال کنید.

 

به روز و پیروز باشید!

 

4/5 - (3 امتیاز)
مطالب مرتبط
با گوشی موبایل چگونه وب سایت بسازیم؟
مطالعه :

روزبه‌روز به تعداد افرادی که با استفاده از دستگاه موبایل خود وب را مرور می‌کنند افزوده می‌شود، از این رو ساخت و طراحی کردن سایت‌هایی که برای مرورگرهای موبایل هستند نسبت به گذشته از اهمیت چندانی برخودار شده‌است. در این مقاله قصد داریم به شما عزیزان نحوه ساخت وب‌سایت با گوشی را آموزش بدهیم. ساخت وب سایت با اپلیکیشن با پیشرفت روزافزون تکنولوژی، اپلیکیشن‌های گوشی هوشمند نیز از این قافله عقب نمانده و یک قدم فراتر برداشته‌اند. آن‌ها این امکان را به افراد می‌دهند تا بتوانند از طریق گوشی و تبلت خود به ساخت و ویرایش یک وب‌سایت بپردازند. اگر شما به دنبال تبلیغات و ایجاد یک کسب‌وکار هستید، ساخت و داشتن یک وب‌سایت ضروری است. این امکانی است اپلیکیشن‌ها در اختیار کاربران گذاشته‌اند تا با استفاده از آن‌ها بتوانند به راحتی وب‌سایت مورد نظر خود را بسازند. برخی از این اپلیکشین‌ها عبارت‌اند از: ۱.اپلیکیشن Milkshake اگر در ساخت وب‌سایت عجله دارید، به شما استفاده از اپلیکیشن Milkshake را پیشنهاد می‌کنیم. این اپلیکشین یک وب‌سایت ساز فوری است که این امکان را به شما می‌دهد تا در چند دقیقه بتوانید یک وب‌سایت برای خودتان بسازید. برای ساخت وب‌‌سایت با گوشی با استفاده از این اپلیکیشن لازم است ابتدا یک طرح را انتخاب کنید، سپس اطلاعات خود را وارد نموده و در آخر لینک‌ها را پیوست نمایید. این اپلیکشین به دلیل […]

building-a-free-foreign-site
مطالعه :

ساخت سایت رایگان خارجی یکی از دغدغه‌های مهم افراد برای پیشبرد اهداف کاری است. در واقع ایجاد سایت توسط شرکت‌های معتبر، هزینه‌های زیادی در بر دارد، به همین دلیل است که افراد تلاش می‌کنند از طریق یادگیری نحوه ایجاد سایت به صورت رایگان و یا کمک گرقفتن از شرکت‌هایی که اقدام به ساخت سایت رایگان می‌کنند، این هزینه‌ها را برای خود به میزان قابل توجهی کاهش دهند. اما برای انجام این کار چه باید کرد؟ به طور کلی در فضای اینترنت آموزش‌های مختلفی برای این منظور ارائه شده است که مشاهده آن‌ها می‌تواند تا حد زیادی به شما برای این منظور کمک کند، اما راهنمایی گرفتن از شرکت‌های فعال طراحی سایت در این امر نیز یک مسئله ضروری است. در وهله اول لازم است که شما نوع سایتی را که می‌خواهید ایجاد کنید، انتخاب کنید. پس از آن یک قالب را به صورت سفارشی تعیین کنید و کار را آغاز کنید. برای ساخت سایت رایگان به چه چیزهایی نیاز است؟ ابتدا باید به دنبال یک سازنده سایت باشید، در واقع چنین شرکت‌هایی این امکان را به شما می‌دهند که پس از ساخت سایت، در فضای اینترنت جایگاه مناسبی برای خود به دست آورید. البته در هنگام تلاش برای کمک گرفتن از یک شرکت معتبر و باتجربه در این زمینه، حتما به چند نکته از جمله داشتن نمونه کار معتبر، داشتن […]

مزیت ساخت سایت در اصفهان برای کسب و کار‌ها
مطالعه :

طراحی وب‌سایت به ساخت، راه‌اندازی و دیزاین صفحات وب گفته می‌شود که در ادامه با مزیت ساخت سایت در اصفهان آشنا می شویم. وب‌سایت‌ها با استفاده از زبان کد‌نویسی طراحی می‌شوند. اما امروزه با پیشرفت فناوری، توانایی‌ها و ویژگی‌های برنامه‌های ساخت وب‌سایت‌ها افزایش یافته و کار را برای برنامه‌نویسان و طراحان وب آسان‌تر کرده است. با توسعه فناوری و استفاده روز افزون مردم از تکنولوژی‌های پیشرفته و همینطور تاثیر شیوع کرونا، باعث شد تا مردم نیاز‌های خود را به صورت آنلاین و حضوری برطرف کنند. همینطور اکثر شرکت‌ها و حتی فروشگاه‌ها کلیه خدمات خود را به صورت اینترنتی در اختیار کاربران و مشتریان خود قرار می‌دهند. از این رو وب‌سایت‌ها اهمیت بسیار زیادی دارند. وب‌سایت‌ها انواع مختلفی از جمله وب‌سایت‌های فروشگاهی، شرکتی، خدماتی و… دارند. طراحی یک وب‌سایت حرفه‌ای می‌تواند شما را در جذب مشتری در اصفهان و شهر‌های دیگر کمک کند، مشتریانی که هم می‌توانند توریست باشند و هم از افراد خود اصفهان. طراحی یک وب‌سایت به خدماتی بستگی دارد که افراد می‌توانند به مشتریان خود ارائه دهند. افراد با طراحی یک وب‌سایت می‌تواند محصولات و یا خدمات خود را به همه مردم ایران و یا حتی جهان معرفی کنند. این خدمات می‌تواند خدمات فروشگاهی و راهبردی باشند. از این رو انتخاب شرکتی که بهترین و به روزترین خدمات ساخته وب‌سایت در اصفهان برای طراحی انواع وب‌سایت‌های تجاری را […]

معرفی شبکه های اجتماعی محبوب
مطالعه :

دنیای امروزه دنیای ارتباطات می باشد واهمیت رسانه ها بیشتر از همیشه احساس می شود. شبکه های اجتماعی با هدف ارتباط گرفتن افراد به وجود آمد و امروزه برای تبلیغات کسب و کارها بسیار مهم تلقی می شود. درعصر ارتباطات اغلب کسب وکارها برای پیشرفت زمینه ی شغلی خود به سمت تبلیغات در شبکه های اجتماعی روی آورده اند.شبکه های اجتماعی محبوب در اطلاع رسانی برای خبرهای روزانه نقش بسیار مهمی را ایفا می کنند. با وب یار همراه باشید تا با بهترین شبکه های اجتماعی در ایران آشنا شویم. در جامعه ی امروزی شبکه های اجتماعی جزئی از زندگی مردم شده که برای تبلیغات ،اطلاع رسانی ها و آموزش و…از این شبکه ها بهره می برند.باتوجه به همگانی شدن شبکه های اجتماعی بین مردم لازم است که در مورد هر کدام از این شبکه ها اطلاعاتی کسب کنیم تا از جوامع امروز عقب نمانیم. تاریخچه مختصری در مورد شبکه های اجتماعی : ریشه شکل گرفتن مفهوم شبکه های اجتماعی در سال 1960در دانشگاه ایلی نویز در آمریکا بود.و بعد از روی کار آمدن مفهوم شبکه های اجتماعی در سال 1997سایتی تشکیل شد که اجازه ایجاد پروفایل به افرادمختلف را داد هدف این سایت جمع کردن لیستی از دوستان در کنار هم بود و بعد از آن هم شبکه های اجتماعی مختلفی با اهداف متنوع روی کار آمد. در سال […]

طراحی قالب وردپرس
مطالعه :

طراحی قالب وردپرس امروزه طرفداران زیادی پیدا کرده است. وردپرس یک سیستم مدیریت محتوای قوی است که می توان با آن قالب های زیبایی طراحی کرد. در مطلب امروز وب یار می خواهیم با نحوه طراحی قالب وردپرس آشنا شویم. بیشتر سایت های دنیای وب امروزی با این سیستم مدیریت طراحی می شودو بازار کار خوبی دارد به ویژه اگر این قالب مختص کسب وکار شما باشد و با توجه به نیاز ها و سلایق شما طراحی شده باشد در این صورت است که علاوه برتکراری نبودن پاسخگوی نیازهای مجموعه شما می باشد. بررسی انواع قالب سایت قالب سایت چیست؟ ابتدا بهتر است کمی به تاریخچه آن بپردازیم. در آغاز قرن جاری و در زمانی که اینترنت هنوز در ابتدای راه خود بود، صفحات سایت‌ها به شکل ساده‌ای طراحی می‌شدند که از چند متن ساده، چند باکس رنگارنگ و شاید یک یا دو تصویر تشکیل شده بودند. تنها افرادی که دارای صفحات وب بودند، کسانی بودند که تخصص فنی در اچ‌تی‌ام‌‌ال برای ساختن یک صفحه سایت را داشتند یا می‌توانستند هزینه انجام این کار را به افرادی که این کار را می‌کردند، پرداخت کنند. اما از آن زمان تاکنون تغییرات زیادی صورت گرفته است و اکنون پلتفرم‌های آنلاین زیادی وجود دارند که به افرادی که تجربه طراحی یا برنامه‌نویسی نسبتا کمی دارند، توانایی اجرای یک وب‌سایت کاملاً کارآمد را می‌دهند. […]

ساخت نرم افزار بدون کد نویسی
مطالعه :

ساخت نرم افزار بدون کد نویسی و با استفاده از کدنویسی انجام می‌شود. در این مقاله از وب یار قصد داریم تا به چگونگی ساخت نرم افزار تحت ویندوز بدون کد نویسی و مزایای آن نسبت به روش‌های قدیمی بپردازیم. با پیشرفت تکنولوژی بستر استفاده از موبایل‌ها و کامپیوترها گسترده‌تر شده است، زیرا روز به روز به تعداد کاربران آن‌ها افزوده میشود. اگر شما نیز ایده‌ای برای تولید نرم افزار و سرویس‌دهی در این بستر را دارید، بهتر است هر چه سریعتر دست به کار شوید و از این فضا که پتانسیل بالایی دارد برای کسب درآمد استفاده کنید. ساخت نرم افزار بدون کد نویسی چگونه ممکن است؟ این روزها دیگر نیاز نیست تا پروسه‌ی طولانی آموزش برنامه نویسی را طی کنید تا بتوانید به ساخت نرم افزارها بپردازید. در گذشته اگر قصد ساخت برنامه‌ای را داشتید باید ساعت‌ها زمان صرف می‌کردید تا با استفاده از کدها دستور العمل‌هایی را برای برنامه تعریف کنید تا عملکرد درستی داشته باشد. همچنین پس از تعریف آن دستور العمل‌ها باید مراحل آزمون و خطا را طی می‌کردید تا به اصطلاح برنامه‌ای که ساخته‌ای را باگ گیری (اشکال‌گیری) کنید. اما دیگر ساخت نرم افزار بدون کد نویسی یک رویا نیست! متخصصان نرم افزارهای زیادی را به عنوان ابزارهای کمکی طراحی کرده‌اند تا کاربران بتوانند بدون نوشتن حتی یک خط کد، نرم افزار ایده‌آل خود […]

دیدگاه ها

۴ پاسخ به “آموزش پوزیشن ها در CSS”

  1. محمد گفت:

    سلام خیلی عالی بود و متوجه شدم
    تشکر

  2. الهام گفت:

    وااای مرسی واقعا کلی سرچ کردم نفهمیدم این مبحث رو شما بی نظریین

  3. میم گفت:

    فوق العاده بود ی ساعت تو اینترنت در مورد پوزیشنها سرچ کردم تنها جایی که مشکلم کامل حل شد اینجا بود مرسی

  4. فرشید گفت:

    مفید و مختصر بدون توضیحات اضافی و گیج کننده
    عالی بود

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.