CSS position کا اپریشن
- پچھلے پیج pointer-events
- آئندہ پہلہ @property
تعریف و استفاده
پوزیشن پروپرتی بندای علامت کجای کائنات را مشخص میکند.
توضیحات
اس نمائش کا مقصد، علامت کے لائئن اپنائنے کے لئے لوکیشن نمائش کا طریقہ کار کا تعین کرنا ہے۔ کسی بھی علامت کو لوکیشن سیٹ کیا جاسکتا ہے، لیکن مضبوط یا پائیدار علامت کسی بھی نوعیت کا بلاک کا فریم پیدا کرتی ہیں، جو علامت کا نوعیت کا فریم نہیں ہوگا۔ مربوط لوکیشن کی علامت عادی فلو کی معمولی لوکیشن کے ساتھ نمودار ہوجاتی ہیں。
دوسرے مراجع بھی دیکھئے:
CSS درسCSS لوکیشن
HTML DOM مراجع دستورپوزیشن نمائش
مثال
h2 علامت کو لوکیشن سیٹ کرنا:
h2
{
position:absolute;
left:100px;
top:150px;
}
CSS نمائش
پوزیشن: static|absolute|fixed|relative|sticky|initial|inherit;
عناصر کا مقدار
| مقدار | وصف |
|---|---|
| absolute |
پورا مقدار لوکیشن کا علامت پیدا کرنا، علامت کو پائیدار نمائش کے علاوہ پہلے والد نمائش کے ساتھ لوکیشن سیٹ کرنا چاہئے。 علامت کی لوکیشن "left", "top", "right" اور "bottom" نمائش کے ذریعے طے کی جاتی ہے。 |
| fixed |
پورا مقدار لوکیشن کا علامت پیدا کرنا، علامت کو براوزر کی ونڈوز کے ساتھ لوکیشن سیٹ کرنا چاہئے。 علامت کی لوکیشن "left", "top", "right" اور "bottom" نمائش کے ذریعے طے کی جاتی ہے。 |
| relative |
مربوط لوکیشن کا علامت پیدا کرنا، علامت کو عادی فلو کی معمولی لوکیشن کے ساتھ لوکیشن سیٹ کرنا چاہئے。 اس لئے، "left:20" علامت کی LEFT لوکیشن میں 20 پیکسل اضافہ کرتا ہے。 |
| static | مقصد: کوئی لوکیشن نہیں، علامت عادی فلو میں نمودار ہوجاتی ہے (top, bottom, left, right یا z-index نمائش کو نظر انداز کرنا چاہئے) |
| inherit | مقصد، پوزیشن نمائش کا قدر پائیدار نمائش کے پاس سے حاصل کرنا چاہئے。 |
تکنیکی تفصیلات
| مقصد: | static |
|---|---|
| نکلیت: | نہیں |
| ورژن: | CSS2 |
| جاوا اسکریپت نمائش: | عنصر.style.position="absolute" |
TIY مثال
- لوکیشن: مربوط لوکیشن
- اس مثال میں علامت کو کیسے اس کی معمولی لوکیشن کے ساتھ کیسے لوکیشن سیٹ کرسکتے ہیں، دکھایا جاتا ہے。
- لوکیشن: پورا مقدار لوکیشن
- اس مثال میں علامت کو کیسے پورا مقدار استعمال کرکے لوکیشن سیٹ کرسکتے ہیں، دکھایا جاتا ہے。
- لوکیشن: پائیدار لوکیشن
- اس مثال میں علامت کو براوزر کی ونڈوز کے ساتھ کیسے لوکیشن سیٹ کرسکتے ہیں، دکھایا جاتا ہے。
- علامت کی شکل کو سیٹ کرنا
- اس مثال میں علامت کی شکل کو کیسے سیٹ کرسکتے ہیں، دکھایا جاتا ہے۔ اس علامت کو اس شکل کے اندر کی جگہ کو چن کے بعد، اس کو دکھایا جاتا ہے。
- Z-index
- Z-index، ایک علامت کو دوسرے علامت کے بعد رکھنے کے لئے استعمال کیا جاسکتا ہے。
- Z-index
- بالائی مثال میں علامت کا Z-index بدل دیا گیا ہے。
براوزر حمایتی
جداول میں شماراں، پورا حمایتی پہلے براوزر کی نسخے کو نشان دہی کرتی ہیں。
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 1.0 | 7.0 | 1.0 | 1.0 | 4.0 |
- پچھلے پیج pointer-events
- آئندہ پہلہ @property
