در توسینسو تدریس کنید

و

با دانش خود درآمد کسب کنید

آموزش طراحی سایت با HTML و CSS قسمت 7 : Position ها

ما در جلسه ی قبل با Float ها آشنا شدیم که می توانستند المان ها را در کنار هم بچینند و به صفحه ی ما شکل دهند. اگر دقت کرده باشید تمام کار هایی که ما تا الان انجام دادیم صفحه ی ما را یک سطح در نظر می گرفتند که المان ها می توانستند در آن حرکت کنند به شرطی که با المان دیگری برخورد نکنند در حقیقت صفحه ی ما دو بعد داشت که باعث می شد حرکت المان ها فقط در فضا های خالی امکان پذیر باشد . Position ها به ما این کمک را می کنند به صفحه های HTML بعد سوم ببخشیم و کاری کنیم که المان ها بتوانند روی هم و حرکت کنند. این Position همان Position پیشفرض است که ما از آن استفاده می کنیم و همان طور که از اسمش معلوم است یک سطح دارد و عمقی ندارد. خروجی: خب حالا وقت دادن Style است. ما با استفاده از پراپرتی Postion نوع آن را که اینجا absolute بود مشخص کردیم و با پراپرتی های top و right اینکه از گوشه ی بالا سمت راست صفحه چقدر فاصله بگیرد. دقت داشته باشید که ما می توانیم از پراپرتی های Top و Bottom برای مختصات Y و از پراپرتی های Right و Left برای مختصات X استفاده کنید. به سخن دیگر ما برای مشخص کردن مختصات y باید از یکی از پراپرتی های Top یا Bottom و برای تعیین مختصات X باید از یکی از پراپرتی های Right و Left استفاده کنیم. خروجی: دیدیم که المان ما از حالت دو بعدی خارج شد و روی بقیه ی المان ها قرار گرفت. همانطور که در بالا دیدیم ما می توانیم مبدا مختصات خود را یکی از گوشه های صفحه در نظر گرفته و نسبت به آن مختصات دهیم. اما در استفاده از Position های Relative مبدا مختصات ما گوشه های صفحه نخواهند بود بلکه جایگاه آن المان در چیدمان صفحه خواهد بود. من برای مثال این قسمت Position تگ Section را به حالت Static در می آورم و پراپرتی های Top و Right را پاک می کنم: خروجی: حالا با استفاده از پراپرتی Position ، Position آن را به حالت Relative در می آورم. میبینم که تغیری در صفحه ی ما ایجاد نشد! این به دلیل این است که طبق گفته ی بالا در Position های Relative مبدا مختصات جایگاه المان در چیدمان خواهد بود (یعنی جایی که اگر المان Position نداشته باشد در آن قرار می گیرد.) حالا من با استفاده از پراپرتی های Bottom و Right به آن مختصات می دهم: خروجی: دیدیم که المان ما حرکت کرد و با توجه به این که ما از پراپرتی های Bottom و Right استفاده کرده بودیم ، 30px از پایین به سمت بالا و 410px از راست به سمت چپ از جایی که قبلا در آن قرار داشت حرکت کرد. این Position نیز مانند Absolute از گوشه های صفحه مختصات می پذیرد اما با این تفاوت که با گویی به صفحه ی نمایش شما می چسبد و حتی با Scroll شدن صفحه هم تکان نمی خورد. برای مثال من Postion کد قبل را به Fixed تغیر می دهم و مختصاتی هم به آن می دهم. من 50px از ضلع چپ صفحه به سمت راست به آن مختصات می وهم و از پایین هم 0pxبه آن دادم که باعث می شود به پایین صفحه بچسبد.(در CSS می توانید واحد های اندازه هایی که 0 هستند را خالی بگذارید.) خروجی: تا اینجا که این Position با Absolute هیچ فرقی نداشته! اما اگر صفحه ام Scroll شود آن وقت می توان فرق آن را فهمید. برای این که صفحه ی من این قابلیت را داشته باشد من مجبورم المانی با ارتفاع بیشتر از صفحه ام ایجاد کنم. من یک Div در صفحه قرار دادم و ارتفاع آن را 2000px گذاشتم تا از ارتفاع صفحه بیشتر باشد. خروجی: حالا صفحه ام Scroll می شود. من صفحه ام را به سمت پایین Scroll می کنم. اگر به Scroll pane دقت کنید می بینید که در وسط صفحه است اما باز هم Section ما در پایین صفحه مانده! این نشان می دهد که وقتی از Postion های Fixed استفاده می کنیم المان ما حتی در زمان Scroll هم سر جای خود باقی می مانند. نمونه ای از استفاده های Position های Fixed را می توانید در نوار بالایی (نوار کاربری ) سایت ITPRO ببینید. در جلسه ی بعد با Background ها و لیست ها و Media ها کار خواهیم کرد. ITPRO باشید. محمد پارسا صفوی انجمن تخصصی فناوری اطلاعات ایران - ITPRO.ir
#آموزش_css #آموزش_طراحی_وبسایت_با_css #طراحی_وبسایت #آموزش_طراحی_وبسایت #ساخت_صفحات_وب #آموزش_html #آموزش_ساخت_صفحات_وب #آموزش_طراحی_وبسایت_با_html
عنوان
1 آموزش طراحی سایت با HTML و CSS قسمت 1 : مقدمه رایگان
2 آموزش طراحی سایت با HTML و CSS قسمت 2 : Style ها و متن ها رایگان
3 آموزش طراحی سایت با HTML و CSS قسمت 3 : لینک ها و CSS Property رایگان
4 آموزش طراحی سایت با HTML و CSS قسمت 4 : تگ های ساختاری و Selector رایگان
5 آموزش طراحی سایت با HTML و CSS قسمت 5 : Box Model رایگان
6 آموزش طراحی سایت با HTML و CSS قسمت 6 : Flaot ها رایگان
7 آموزش طراحی سایت با HTML و CSS قسمت 7 : Position ها رایگان
8 آموزش طراحی سایت با HTML و CSS قسمت 8 : لیست ، Background و عکس رایگان
9 طراحی وب سایت با کمک HTML و CSS - بخش نهم :: فرم ها و جداول رایگان
10 آموزش طراحی سایت با HTML و CSS قسمت 10 : کد نویسی اصولی رایگان
11 آموزش طراحی سایت با HTML و CSS قسمت 11 : انیمیشن ها رایگان
12 آموزش طراحی سایت با HTML و CSS قسمت 12 : طراحی واکنشگرا رایگان
زمان و قیمت کل 0″ 0
0 نظر

هیچ نظری ارسال نشده است! اولین نظر برای این مطلب را شما ارسال کنید...

نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره پاییزه می تونی امروز ارزونتر از فردا خرید کنی ....