सीएसएस लेआउट - स्थिति संपत्ति
positionगुण किसी तत्व (स्थिर, सापेक्ष, स्थिर, निरपेक्ष या चिपचिपा) के लिए उपयोग की जाने वाली स्थिति विधि के प्रकार को निर्दिष्ट करता है ।
स्थिति संपत्ति
positionगुण किसी तत्व के लिए उपयोग की जाने वाली पोजिशनिंग विधि के प्रकार को निर्दिष्ट करता है ।
पांच अलग-अलग स्थिति मान हैं:
staticrelativefixedabsolutesticky
तत्वों को तब ऊपर, नीचे, बाएँ और दाएँ गुणों का उपयोग करके स्थित किया जाता है। हालांकि, ये गुण तब तक काम नहीं करेंगे जब तक कि position
संपत्ति पहले सेट न हो जाए। वे स्थिति मूल्य के आधार पर भी अलग तरह से काम करते हैं।
स्थिति: स्थिर;
HTML तत्व डिफ़ॉल्ट रूप से स्थिर स्थित होते हैं।
स्थैतिक स्थित तत्व ऊपर, नीचे, बाएँ और दाएँ गुणों से प्रभावित नहीं होते हैं।
के साथ एक तत्व position: static;किसी विशेष तरीके से तैनात नहीं है; यह हमेशा पृष्ठ के सामान्य प्रवाह के अनुसार स्थित होता है:
यहाँ सीएसएस है जिसका उपयोग किया जाता है:
उदाहरण
div.static {
position: static;
border: 3px solid #73AD21;
}
स्थिति: रिश्तेदार;
के साथ एक तत्व position: relative;अपनी सामान्य स्थिति के सापेक्ष स्थित है।
अपेक्षाकृत स्थित तत्व के ऊपर, दाएं, नीचे और बाएं गुणों को सेट करने से यह अपनी सामान्य स्थिति से दूर समायोजित हो जाएगा। अन्य सामग्री को तत्व द्वारा छोड़े गए किसी भी अंतराल में फिट करने के लिए समायोजित नहीं किया जाएगा।
यहाँ सीएसएस है जिसका उपयोग किया जाता है:
उदाहरण
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
स्थिति: निश्चित;
के साथ एक तत्व position: fixed;व्यूपोर्ट के सापेक्ष स्थित है, जिसका अर्थ है कि यह हमेशा एक ही स्थान पर रहता है, भले ही पृष्ठ स्क्रॉल किया गया हो। तत्व की स्थिति के लिए ऊपर, दाएं, नीचे और बाएं गुणों का उपयोग किया जाता है।
एक निश्चित तत्व उस पृष्ठ में कोई अंतर नहीं छोड़ता है जहां वह सामान्य रूप से स्थित होता।
पृष्ठ के निचले-दाएँ कोने में निश्चित तत्व पर ध्यान दें। यहाँ सीएसएस है जिसका उपयोग किया जाता है:
उदाहरण
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width:
300px;
border: 3px solid #73AD21;
}
position: fixed;स्थिति: निरपेक्ष;
के साथ एक तत्व position: absolute;निकटतम स्थित पूर्वज के सापेक्ष स्थित है (व्यूपोर्ट के सापेक्ष स्थित होने के बजाय, निश्चित की तरह)।
हालाँकि; यदि एक पूर्ण स्थिति वाले तत्व में कोई पूर्वज नहीं है, तो यह दस्तावेज़ के मुख्य भाग का उपयोग करता है, और पृष्ठ स्क्रॉलिंग के साथ आगे बढ़ता है।
नोट: पूर्ण स्थित तत्व सामान्य प्रवाह से हटा दिए जाते हैं, और तत्वों को ओवरलैप कर सकते हैं।
ये रहा एक सरल उदाहरण:
यहाँ सीएसएस है जिसका उपयोग किया जाता है:
उदाहरण
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;उपयोगकर्ता की स्क्रॉल स्थिति के आधार पर स्थित है।
एक चिपचिपा तत्व स्क्रॉल स्थिति के आधार पर relativeऔर के बीच टॉगल करता है। fixedव्यूपोर्ट में दी गई ऑफ़सेट स्थिति पूरी होने तक इसे सापेक्ष स्थिति में रखा जाता है - फिर यह जगह में "चिपक जाता है" (जैसे स्थिति: निश्चित)।
नोट: इंटरनेट एक्सप्लोरर स्टिकी पोजिशनिंग का समर्थन नहीं करता है। सफारी को एक -webkit- उपसर्ग की आवश्यकता होती है (नीचे उदाहरण देखें)। आपको काम करने के लिए कम से कम एक , या स्टिकी पोजिशनिंग के लिए भी topनिर्दिष्ट करना होगा right।bottomleft
इस उदाहरण में, चिपचिपा तत्व पृष्ठ के शीर्ष पर चिपक जाता है ( top: 0), जब आप इसकी स्क्रॉल स्थिति तक पहुँचते हैं।
उदाहरण
div.sticky {
position: -webkit-sticky; /* Safari */
position:
sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
एक छवि में पोजिशनिंग टेक्स्ट
किसी छवि पर टेक्स्ट कैसे रखें:
उदाहरण
इसे स्वयं आज़माएं:
और ज्यादा उदाहरण
This example demonstrates how to set the shape of an element. The element is clipped into this shape, and displayed.
All CSS Positioning Properties
| Property | Description |
|---|---|
| bottom | Sets the bottom margin edge for a positioned box |
| clip | Clips an absolutely positioned element |
| left | Sets the left margin edge for a positioned box |
| position | Specifies the type of positioning for an element |
| right | Sets the right margin edge for a positioned box |
| top | Sets the top margin edge for a positioned box |