آموزش position در css مقادیر relative – absolute

آموزش position در css یکی از خصوصیت های بسیار مهم در استایل دهی است که اگر با کدنویسی html css سروکار دارید حتما باید بلد باشید. در این آموزش بصورت کامل با خصوصیت position و مقادیر relative و absolute آشنا میشوید. برای درک کامل موضوع حتما ویدیو بالا که بخشی از دوره آموزش html و css است را ببینید

با استفاده از خصوصیت position در css میتوانید محل قرارگیری یک عنصر را در صفحه مشخص کنید. ویژگی position یکی از چهار مقدار زیر را میتواند داشته باشد

• position : absolute  تنظیم موقعیت بر اساس المان پدر با استفاده از مقادیر top – right – bottom – left (برای این منظور عنصر پدر باید position : relative بگیرد)
• position : fixed  موقعیت ثابت در یک محل خاص تحت هر شرایطی
• position : relative  این مقدار به عنصر پدر داده میشود تا عنصر فرزند با دریافت position:absolute بتواند موقعیت خود را بر اساس عنصر پدر با استفاده از مقادر top – right – bottom – left تنظیم نماید
• position : sticky  موقعیت چسبنده (این مقدار در مرورگر اینترنت اکسپلورر یا IE پشتیبانی نمیشود.po)

مثال : به شکل زیر دقت کنید فرض کنید باکس آبی رنگ کلاسی با نام pedar دارد و باکس قرمز رنگ کلاسی با نام farzand دارد. حالا برای اینکه موقعیت و محل قرارگیری باکس فرزند(قرمزه) را نسبت به باکس پدر(آبیه) کنترل کنیم باید به کلاس پدر در css استایل position:relative بدیم و به کلاس فرزند هم position:absolute بدیم و سپس با مقدار دادن به ویژگی های top – right – left – bottom در باکس فرزند موقعیت آن را نسبت به باکس پدر کنترل کنیم

.pedar{
position:relative;
}

.farzand{
position:absolute;
top:150px;
right: 70;
bottom: 0;
left: 0;
}

نکته : وقتی به خصوصیت top برای میزان فاصله از بالا مقدار دادیم طبیعتا دیگه نیاز نیست به bottom مقدار بدیم و همینطور وقتی به right مقدار بدیم دیگه نیازی به مقداردهی خصوصیت left نداریم

برای درک بهتر این موضوع پیشنهاد میکنم حتما فیلم آموزشی بالا رو ببینید که بصورت عملی و نحوه استفاده و کاربرد position:relative و position:absolute را نشان دادیم. ضمنا این آموزش بخشی از دوره آموزش طراحی سایت با html و css هست.