مفهوم position و مختصات left و top در HTML :
در HTML، position، left و top مفاهیمی هستند که برای قرار دادن المان ها در صفحه وب استفاده می شوند. در این مقاله به بررسی این مفاهیم می پردازیم.
مفهوم position:
position یک ویژگی CSS است که برای تعیین نوع مکان گذاری المان در صفحه وب استفاده می شود. این ویژگی 4 مقدار مختلف دارد که عبارتند از:
1- static: این مقدار به صورت پیش فرض برای همه المان ها در نظر گرفته می شود و به این معنی است که المان در جایی که در سورس قرار دارد، قرار می گیرد و هیچ تغییری در مکان المان اعمال نمی شود.
2- relative: با تعیین این مقدار، المان مورد نظر به نسبت به موقعیت اولیه خود مکان گذاری می شود. به عبارت دیگر، مکان المان نسبت به موقعیت اولیه خود تغییر می کند ولی مکان المان های دیگر تحت تاثیر قرار نمی گیرند.
3- absolute: با تعیین این مقدار، المان مورد نظر به نسبت به المان والد خود مکان گذاری می شود. به عبارت دیگر، مکان المان نسبت به المان والد خود مشخص می شود. اگر المان والد، position داشته باشد، مکان المان مورد نظر نسبت به المان والد، به صورت نسبی تعیین می شود و اگر المان والد، position نداشته باشد، مکان المان نسبت به body تعیین می شود.
4- fixed: با تعیین این مقدار، المان مورد نظر به نسبت به صفحه مشاهده مکان گذاری می شود. به عبارت دیگر، مکان المان نسبت به صفحه مشاهده ثابت است و با اسکرول کردن، موقعیت المان تغییر نمی کند.
مختصات left و top:
left و top نیز دو مفهوم مربوط به position هستند که برای تعیین مکان المان در صفحه وب استفاده می شوند. left مکان افقی المان را نسبت به مرجع مورد نظر مشخص می کند و top مکان عمودی المان را نسبت به مرجع مورد نظر مشخص می کند. مرجع مورد نظر می تواند المان والد یا صفحه مشاهده باشد. برای تعیین موقعیت المان با استفاده از left و top، باید position المان را به relative یا absolute تغییر داد و سپس مقدار left و top را مشخص کرد.
به عنوان مثال، فرض کنید یک المان دلخواه در داخل یک المان والد قرار دارد و می خواهیم آن را در مکان دلخواهی نمایش دهیم. برای این کار، ابتدا position المان را به relative یا absolute تغییر داده و سپس با استفاده از left و top، مکان مورد نظر را مشخص می کنیم.
مثال:
در این مثال، المان دلخواه در داخل یک المان والد قرار دارد که position آن به relative تغییر داده شده است. المان دلخواه نیز position:absolute دارد و با استفاده از left:50px و top:100px، مکان آن در نسبت به المان والد مشخص شده است.
در نتیجه، position، left و top مفاهیمی پرکاربرد در HTML هستند که به کاربران اجازه می دهند المان ها را در مکان دلخواهی قرار دهند. با توجه به این که این مفاهیم به صورت پیش فرض در قالب HTML وجود دارند، استفاده از آنها بسیار آسان است و تنها نیاز به تغییر مقادیر مربوطه دارد.
