CSS लेआउट - position गुण
- पिछला पृष्ठ CSS मैक्स-विड्थ
- अगला पृष्ठ CSS z-index
position गुण निर्देश एलिमेंट के स्थानीयकरण विधि के प्रकार (स्टैटिक, रिलेटिव, फिक्स्ड, एब्सोल्यूट या स्टिकी) पर लागू होते हैं।
position गुण
position गुण एलीमेंट के स्थानीयकृत तरीके के लिए प्रयोग किया जाने वाला प्रकार निर्धारित करता है。
पांच अलग स्थानीयकृत मान हैं:
- static
- relative
- fixed
- absolute
- sticky
एलीमेंट वास्तव में top, bottom, left और right गुणों के द्वारा स्थानीयकृत होते हैं. लेकिन, जब तक position गुण सेट नहीं किया जाता है, तब तक ये गुण काम नहीं करते। विभिन्न position मान के अनुसार उनका काम करने का तरीका भी अलग होता है。
position: static;
HTML एलीमेंट के डिफ़ॉल्ट स्थानीयकृत तरीका static (स्थिर) है.
स्थिर स्थानीयकृत एलीमेंट top, bottom, left और right गुणों से प्रभावित नहीं होते.
position: static; के एलीमेंट किसी विशेष तरीके से स्थानीयकृत नहीं होते; यह हमेशा पृष्ठ के सामान्य प्रवाह के अनुसार स्थानीयकृत होता है:
यहाँ प्रयोग किया जाने वाला CSS है:
उदाहरण
div.static {
position: static;
border: 3px solid #73AD21;
}
position: relative;
position: relative; के एलीमेंट उसके सामान्य स्थान के अनुसार स्थानीयकृत होते हैं.
स्थानीय स्थानीयकृत एलीमेंट के top, right, bottom और left गुण सेट करने से उसे उसके सामान्य स्थान से दूर करके स्थानांतरित करना होगा. उसे किसी अन्य सामग्री को स्थानांतरित करके अनुकूलित नहीं किया जाएगा.
यहाँ प्रयोग किया जाने वाला CSS है:
उदाहरण
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
position: fixed;
position: fixed; के एलीमेंट viewport के अनुसार स्थानीयकृत होते हैं, यानी चाहे वह पृष्ठ को सरकार करें, वह हमेशा उसी स्थान पर रहता है. top, right, bottom और left गुण इस एलीमेंट के स्थाननिर्धारण के लिए प्रयोग किए जाते हैं.
स्थिर स्थानीयकृत एलीमेंट पृष्ठ में आमतौर पर स्थान रखने के लिए खाली स्थान नहीं छोड़ता है.
कृपया पृष्ठ के दायाँ नीचे के इस स्थिर एलीमेंट को ध्यान से देखें. यहाँ प्रयोग किया जाने वाला CSS है:
उदाहरण
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
position: absolute;
position: absolute; के एलीमेंट निकटतम स्थानीय वरिष्ठ एलीमेंट के अनुसार स्थानीयकृत होता है (दृश्य शीर्षक के लिए fixed के विपरीत, जैसे कि viewport के अनुसार).
तथापि, यदि अब्जूल्ट स्थानीयकृत एलीमेंट के पूर्ववर्ती नहीं है, तो यह डॉक्यूमेंट सामग्री (body) का उपयोग करेगा और पृष्ठ के साथ साथ सरकार करता है।
ध्यान:“स्थानीय” एलीमेंट उसके स्थान को छोड़कर static इसके अलावा किसी भी अन्य एलीमेंट.
यह एक साधारण उदाहरण है:
यहाँ प्रयोग किया जाने वाला CSS है:
उदाहरण
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
position: sticky;
position: sticky; के बारे में लोकेशन करते हैं।
जैसे sticky एलिमेंट रोलिंग स्थान के अनुसार रिलेटिव (relative) और फिक्स्ड (fixed) के बीच परिवर्तन करें। प्रारंभ में यह रिलेटिव लोकेशन होगा, जब तक इसे विजुअल में दिये गए ऑफसेट स्थान तक नहीं पहुंचता है - फिर इसे उचित स्थान पर (जैसे position:fixed) 'स्टिकी' कर दिया जाएगा。
ध्यान:Internet Explorer, Edge 15 और अधिक पुरानी संस्करण जैसे sticky लोकेशन को समर्थन नहीं करते। Safari को -webkit- प्रीफिक्स (नीचे के उदाहरण को देखें) की जरूरत है। आपको कम से कम एक अनुक्रम को निर्दिष्ट करना होगा top、right、bottom या left एक में, ताकि sticky लोकेशन कार्य कर सके。
इस उदाहरण में, जब इसका रोलिंग स्थान पहुंचता है, sticky एलिमेंट पृष्ठ के शीर्ष पर रहेगा (top: 0）。
उदाहरण
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
ओवरलैप एलिमेंट
एलिमेंट को लोकेशन करते समय, वे दूसरे एलिमेंटों से ओवरलैप कर सकते हैं。
z-index गुण एलिमेंट के ढलान वाले अनुक्रम (कौन सा एलिमेंट दूसरे एलिमेंट के सामने या पीछे रखा जाना चाहिए) को निर्दिष्ट करता है。
एलिमेंट को सकारात्मक या नकारात्मक ढंग से ढलान वाला सेट किया जा सकता है:
यह एक शीर्षक है
इमेज के z-index -1 के कारण, यह पाठ के पीछे स्थित है。
उदाहरण
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
अधिक ढंग से ढलान वाले एलिमेंट हमेशा कम ढंग से ढलान वाले एलिमेंट से पहले होते हैं。
ध्यान:यदि दोनों लोकेशन एलिमेंट ओवरलैप होते हैं और इसके लिए कोई निर्दिष्ट नहीं है z-indexतो HTML कोड में अंतिम एलिमेंट शीर्ष पर प्रदर्शित होगा。
लोकेशन इमेज में टेक्स्ट
चित्र पर लिखे जाने वाले शब्द को कैसे स्थापित किया जाता है:
उदाहरण
स्वयं आयात्रा करें:
और अधिक उदाहरण
- सेट एलिमेंट का आकार
- इस उदाहरण में देखा जाता है कि कैसे एलिमेंट का आकार सेट किया जाता है। एलिमेंट इस आकार में काटा जाता है और प्रदर्शित किया जाता है。
सभी CSS लोकेशन गुण
| गुण | वर्णन |
|---|---|
| bottom | सेटिंग लोकेशन बॉक्स की निचली बाहरी किनारा. |
| clip | अब्जॉल्यूट लोकेशनिंग के एलिमेंट को काट। |
| left | सेट लोकेशन बॉक्स के बाईं बाह्य मार्गदर्शक किनारा |
| position | एलिमेंट के लोकेशनिंग टाइप को निर्धारित करें |
| right | सेट लोकेशन बॉक्स के दायाँ बाह्य मार्गदर्शक किनारा |
| top | सेट लोकेशन बॉक्स के शीर्ष बाह्य मार्गदर्शक किनारा |
| z-index | सेट एलिमेंट की स्टैकिंग ऑर्डर |
विस्तृत पढ़ना
अध्याय:CSS लोकेशनिंग एडवांसमेंट
अध्याय:CSS रेलेटिव लोकेशनिंग
अध्याय:CSS अब्जॉल्यूट लोकेशनिंग
- पिछला पृष्ठ CSS मैक्स-विड्थ
- अगला पृष्ठ CSS z-index
