CSS position गुण
- पिछला पृष्ठ pointer-events
- अगला पृष्ठ @प्रोपर्टी
व्याख्या और उपयोग
position विशेषता एलिमेंट के स्थानांतरण प्रकार को निर्धारित करती है।
वर्णन
इस गुण को एलिमेंट के लेआउट को स्थापित करने के लिए स्थानांतरण तकनीक को परिभाषित करता है। किसी भी एलिमेंट को स्थानांतरित किया जा सकता है किंतु अब्जूल्ट या फ़िक्स्ड स्थानांतरित करने वाले एलिमेंट तो एक ब्लॉक स्क्रीन का बॉक्स बना देते हैं, जो एलिमेंट के स्वयं के प्रकार से भी निर्भर करता है। सामान्य स्थान के अनुसार स्थानांतरित करने वाले एलिमेंट सामान्य प्रवाह में उसके स्थान के अनुसार स्थानांतरित करते हैं。
और देखें:
CSS पाठ्यक्रम:CSS स्थानांतरण
HTML DOM संदर्भ दस्तावेज़:position गुण
उदाहरण
h2 एलिमेंट को स्थानांतरित करना:
h2
{
position:absolute;
left:100px;
top:150px;
}
CSS व्याकरण
position: 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 | पिछले एलिमेंट से position गुण के मान को विरासत करना निर्धारित किया गया है。 |
तकनीकी विवरण
| डिफ़ॉल्ट मान: | static |
|---|---|
| विरासतीयता: | नहीं |
| संस्करण: | CSS2 |
| जावास्क्रिप्ट व्याकरण: | object.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
- अगला पृष्ठ @प्रोपर्टी
