آموزش CSS

آموزش CSS - موقعیت اشیا

این ویژگی نشان می دهد یک عنصر چگونه در صفحه قرار می گیرد.

روش های موقعیت یابی CSS:

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

موقعیت یابی استاتیک

عنصر یا المانی که موقعیت استاتیک دارد همیشه طبق روال نرمال صفحه موقعیتش مشخص می شود. عناصر HTML به طور پیش فرض به صورت استاتیک هستند. عناصری که موقعیت آن ها استاتیک است با ویژگی های بالا، پایین، چپ، راست و محور Z تحت تاثیر قرار نمی گیرند.

.box {
    padding: 20px;
    background: #7dc765;
}

موقعیت یابی نسبی

المانی که موقعیت آن نسبی است در مکانی نسبت به حالت نرمال قرار گرفته است.

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

.box {
    position: relative;
    left: 100px;
}

نکته: المان با موقعیت نسبی می تواند تغییر مکان دهد و با سایر عناصر همپوشانی داشته باشد اما به طور کلی فضایی که برای آن در جریان طبیعی وجود داشته باشد حفظ می شود.

موقعیت یابی مطلق

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

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

.box {
    position: absolute;
    top: 200px;
    left: 100px;
}

موقعیت یابی ثابت

موقعیت یابی ثابت زیر مجموعه موقعیت یابی مطلق است.

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

.box {
    position: fixed;
    top: 200px;
    left: 100px;
}

نکته: در رسانه های چاپی، عنصر ثابت در هر صفحه ارائه شده است و با توجه به صفحه ثابت شده است (حتی در پیشنویس پرینت).  IE7 و IE8 مقدار ثابت را در زمانی که <!DOCTYPE> مشخص است، حمایت می کنند.

در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش CSS

Learn CSS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

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

سوال شما با موفقیت ثبت شد. برای اینکه بتوانیم به شما اطلاع رسانی کنیم، موارد زیر را وارد کنید:

لطفا چند لحظه منتظر بمانید ...