HTML तत्वों की स्थिति वेब पेज घटकों को व्यवस्थित करने में महत्वपूर्ण भूमिका निभाती है। अधिक विशेष रूप से, सीएसएस का उपयोग करके तत्वों की स्थिति को समायोजित किया जा सकता है ' पद ' संपत्ति। यह संपत्ति ऑफसेट गुणों से जुड़ी हो सकती है, जैसे कि शीर्ष, बाएं, दाएं और निचले गुण, पृष्ठ पर तत्व को समायोजित करने के लिए विशिष्ट मान प्रदान करते हैं। हालांकि ' शुद्ध 'स्थित तत्वों को निकटतम स्थित तत्व के सापेक्ष समायोजित किया जा सकता है।
यह पोस्ट CSS की निरपेक्ष स्थिति की व्याख्या करेगी।
सीएसएस 'स्थिति' संपत्ति
' पद CSS में संपत्ति का उपयोग तत्व की स्थिति को समायोजित करने के लिए किया जा सकता है। स्थिति संपत्ति के विभिन्न मूल्य निश्चित, निरपेक्ष, सापेक्ष, स्थिर और चिपचिपा हैं। ये मान तत्व की स्थिति को समायोजित करने के लिए ऑफसेट गुणों, जैसे शीर्ष, दाएं, बाएं और नीचे के साथ सेट किए गए हैं।
सीएसएस एब्सोल्यूट पोजिशनिंग कैसे लागू करें?
सीएसएस का उपयोग करके तत्व की पूर्ण स्थिति लागू की जा सकती है ' पद 'मूल्य के साथ संपत्ति' शुद्ध ”। पूर्ण स्थिति वाले तत्व को उसके निकटतम स्थित मूल तत्व के अनुरूप समायोजित किया जाता है। लेकिन यदि पूर्वज स्थित नहीं है, तो यह दस्तावेज़ के मुख्य भाग के सापेक्ष समायोजित होगा।
उदाहरण
आइए अवधारणा को एक व्यावहारिक उदाहरण से समझते हैं।
चरण 1: एक HTML फ़ाइल बनाएँ
HTML फ़ाइल में, बॉडी एलिमेंट के भीतर, क्लास नाम के साथ एक div जोड़ें ' मुख्य ”। फिर, निर्मित div के अंदर, निम्न विशेषताओं से जुड़ा एक HTML टैग जोड़ें:
-
- ' स्रोत ” छवि के लिए एक लिंक प्रदान करता है।
- ' कक्षा ” तत्वों को स्टाइल करने के लिए CSS में उपयोग किया जाता है।
- ' सब कुछ ” विशेषता उस पाठ को निर्दिष्ट करती है जो छवि के स्थान पर दिखाई देती है यदि छवि पृष्ठ पर लोड होने में विफल रहती है।
- ' सब कुछ ” विशेषता उस पाठ को निर्दिष्ट करती है जो छवि के स्थान पर पृष्ठ पर दिखाई देती है यदि छवि पृष्ठ पर लोड होने में विफल रहती है।
फिर, शीर्षक और पैराग्राफ के h1 और p तत्वों से युक्त एक और div जोड़ें:
< डिव कक्षा = 'मुख्य' >< डिव कक्षा = 'विषय' >
< आईएमजी स्रोत = 'छवियां/linuxlogo.png' कक्षा = 'घर' सब कुछ = 'लिनक्स लोगो' चौड़ाई = '80 पीएक्स' >
< एच 1 > सीएसएस पूर्ण स्थिति एच 1 >
< पी > हैलो लिनक्सहिंट टीम ! पी >
डिव >
डिव >
CSS में, HTML तत्वों को सजाने के लिए कई स्टाइलिंग गुणों का उपयोग किया जाता है।
चरण 2: शैली 'सभी' तत्व
* {फ़ॉन्ट-फ़ैमिली: वर्दाना, जिनेवा, ताहोमा, सैंस-सेरिफ़;
}
HTML तत्वों को “का उपयोग करके स्टाइल किया गया है फुहारा परिवार 'मूल्य के साथ संपत्ति' वर्दाना, जिनेवा, ताहोमा, सं-सेरिफ़ ”। मानों की यह सूची सुनिश्चित करती है कि यदि ब्राउज़र पहली शैली का समर्थन नहीं करता है, तो दूसरी शैली लागू की जाएगी।
चरण 3: स्टाइल 'होम' डिव
।घर {स्थिति: निरपेक्ष;
शीर्ष: 50 पीएक्स;
बायां: 45 पीएक्स;
}
नीचे गुण लागू होते हैं ' घर 'डिव:
-
- ' पद ' संपत्ति तत्व की स्थिति निर्धारित करती है। यहाँ, जोड़ा गया ' शुद्ध ”तत्व को HTML के मुख्य भाग के सापेक्ष स्थान देगा।
- ' ऊपर ” संपत्ति का उपयोग तत्व के लंबवत समायोजन के लिए किया जाता है।
- ' बाएं ” संपत्ति का उपयोग तत्व के क्षैतिज समायोजन के लिए किया जाता है।
चरण 4: शैली 'सामग्री' div
।विषय {पृष्ठभूमि-रंग: कैडेटनीला;
चौड़ाई: 300 पीएक्स;
ऊंचाई: 250 पीएक्स;
पैडिंग-लेफ्ट: 40px;
मार्जिन-लेफ्ट: 80px;
}
नीचे सीएसएस गुण हैं जो 'पर लागू होते हैं' विषय 'डिव:
-
- ' पीछे का रंग ” संपत्ति तत्व की पृष्ठभूमि का रंग सेट करती है।
- ' चौड़ाई ' संपत्ति तत्व की चौड़ाई निर्धारित करती है।
- ' ऊंचाई ' संपत्ति तत्व की ऊंचाई निर्धारित करती है।
- ' गद्दी छूट गई ” गुण को तत्व की सामग्री के बाईं ओर स्थान जोड़ने के लिए सेट किया गया है।
- ' मार्जिन छोड़ दिया ” संपत्ति तत्व के बाईं ओर स्थान निर्दिष्ट करती है।
इस बिंदु पर, हमारा वेब पेज इस तरह दिखेगा:
उपरोक्त परिणाम से यह देखा जा सकता है कि div होम की छवि ऊपर से 50px और दस्तावेज़ के बाएँ भाग से 45px पर रखी गई है। इसके अलावा, होम डिव की स्थिति HTML के बॉडी सेक्शन के सापेक्ष सेट की गई है।
पोजिशनिंग पैरेंट एलिमेंट के लिए 'रिश्तेदार' तत्व की स्थिति को कैसे समायोजित करें?
यह खंड निकटतम स्थिति मूल तत्व के सापेक्ष तत्व की स्थिति को समायोजित करने पर आपका मार्गदर्शन करेगा।
'सामग्री' div की 'स्थिति' संपत्ति सेट करें
स्थिति: रिश्तेदार;
मूल तत्व के सापेक्ष तत्व की स्थिति को समायोजित करने के लिए, 'सेट करें' पद 'मूल तत्व की संपत्ति' रिश्तेदार ' कीमत।
'आईएमजी' तत्व की 'स्थिति' संपत्ति सेट करें
।घर {स्थिति: निरपेक्ष;
शीर्ष: 100 पीएक्स;
बायां: 220 पीएक्स;
}
यहां:
-
- ' पद ' के रूप में सेट मूल्य के साथ संपत्ति ' शुद्ध ” को मूल तत्व के सापेक्ष स्थित किया जाएगा (अर्थात, सामग्री div स्थिति मान सापेक्ष के साथ सेट की गई है)।
- ' ऊपर ” संपत्ति का उपयोग ऊपर से तत्व की स्थिति निर्धारित करने के लिए किया जाता है।
- ' बाएं ” संपत्ति का उपयोग बाईं ओर से तत्व की स्थिति निर्धारित करने के लिए किया जाता है।
उत्पादन
यह परिणाम से देखा जा सकता है कि छवि को उसके पैरेंट डिव के सापेक्ष रखा गया है, और यह उपयुक्त दिखता है।
निष्कर्ष
सीएसएस ' पद 'संपत्ति का उपयोग HTML तत्वों की स्थिति निर्धारित करने के लिए किया जाता है। इस संपत्ति को निश्चित, सापेक्ष, निरपेक्ष, चिपचिपा और स्थिर के रूप में माना जा सकता है। ' शुद्ध ” मान तत्व को उसके आस-पास स्थित मूल तत्व के अनुरूप स्थित करेगा। इस पोस्ट में CSS निरपेक्ष स्थिति को एक व्यावहारिक उदाहरण के साथ समझाया गया है।