टॉप / बॉटम / लेफ्ट / राइट - सीएसएस-ट्रिक्स

top, bottom, left, और rightगुण एक तत्व के स्थान निर्धारित करने के लिए स्थिति के साथ किया जाता है। वे केवल तैनात तत्वों पर प्रभाव डालते हैं, जो कि positionसंपत्ति के अलावा अन्य तत्वों के साथ तत्व हैं static। उदाहरण के लिए: relative, absolute, fixed, या sticky।

div ( : || || auto || inherit; )

उदाहरण के लिए, किसी आइकन को जगह से हटाने के लिए आप इसका उपयोग कर सकते हैं:

button .icon ( position: relative; top: 1px; )

या एक कंटेनर के अंदर एक विशेष तत्व की स्थिति।

.container ( position: relative; ) .container header ( position: absolute; top: 0; )

मूल्य के लिए top, bottom, left, और rightनिम्न में से कोई हो सकता है:

• CSS की मान्य लंबाई में से कोई भी
• युक्त तत्व की ऊंचाई (के लिए topऔर bottom) या चौड़ाई (के लिए leftऔर right) का एक प्रतिशत
• auto
• inherit

तत्व आम तौर पर किसी दिए गए पक्ष से दूर चला जाएगा जब उसका मूल्य सकारात्मक होगा, और मूल्य नकारात्मक होने पर उसकी ओर। नीचे दिए गए उदाहरण में, topतत्व को नीचे ले जाने के लिए एक सकारात्मक लंबाई (ऊपर से दूर) और एक नकारात्मक लंबाई topतत्व को ऊपर ले जाएगी (ऊपर की ओर):

पेन
टॉप देखें : कोडपेन
पर मात्सुको फ्राइडलैंड (@missmatsuko) द्वारा सकारात्मक और नकारात्मक मान ।

पद

के लिए एक मूल्य के साथ एक तत्व की नियुक्ति top, bottom, left, या rightके लिए अपने मूल्य पर निर्भर करता है position। आइए एक नज़र डालते हैं कि क्या होता है जब हम topअलग-अलग मूल्यों वाले तत्वों के लिए समान मूल्य निर्धारित करते हैं position।

static

topसंपत्ति unpositioned तत्वों (साथ तत्वों पर कोई प्रभाव नहीं positionकरने के लिए सेट static)। इस तरह से तत्व डिफ़ॉल्ट रूप से तैनात होते हैं। आप एक तत्व पर position: static;प्रभाव को पूर्ववत करने के लिए एक विधि के रूप में उपयोग कर सकते हैं top।

relative

जब topसेट के साथ एक तत्व पर positionसेट किया जाता है relative, तो दस्तावेज़ में मूल प्लेसमेंट के संबंध में तत्व ऊपर या नीचे जाएगा।

पेन
टॉप देखें : कोडपेन पर मात्सुको फ्रीडलैंड (@missmatsuko) के
सापेक्ष।

absolute

जब topसेट के साथ एक तत्व पर positionसेट किया जाता है absolute, तो तत्व अपने निकटतम पूर्वज (या दस्तावेज़, यदि कोई पूर्वज तैनात नहीं हैं) के संबंध में ऊपर या नीचे चले जाएंगे।

इस डेमो में, बाईं ओर का गुलाबी बॉक्स पृष्ठ के शीर्ष से 50px नीचे स्थित है क्योंकि इसमें कोई पूर्वज तत्व नहीं है। दाईं ओर गुलाबी बॉक्स अपने माता-पिता के ऊपर से 50px नीचे की ओर स्थित है, क्योंकि माता-पिता के पास एक positionहै relative।

पेन
टॉप देखें : कोडपेन
पर मात्सुको फ्राइडलैंड (@missmatsuko) द्वारा निरपेक्ष।

fixed

जब topसेट के साथ एक तत्व पर positionसेट किया जाता है fixed, तो तत्व ब्राउज़र के व्यूपोर्ट के संबंध में ऊपर या नीचे जाएगा।

पेन
टॉप देखें :
CodePen पर CSS-Tricks (@ css-tricks) द्वारा तय किया गया।

पहली नज़र में, ऐसा लग सकता है कि absoluteऔर दोनों के बीच कोई अंतर नहीं है fixed। अंतर तब देखा जा सकता है जब आप उनकी तुलना ऐसे पृष्ठ पर करते हैं जिसमें स्क्रॉल करने के लिए पर्याप्त सामग्री होती है। जब आप नीचे स्क्रॉल करते हैं, तो fixedस्थिति तत्व हमेशा दृश्य में होता है, जबकि absoluteस्थिति तत्व स्क्रॉल करता है।

पेन
स्क्रॉलिंग देखें :
CodePen पर CSS-Tricks (@ css-tricks) द्वारा निश्चित बनाम निरपेक्ष ।

sticky

जब topसेट के साथ एक तत्व पर positionसेट किया जाता है sticky, तो तत्व स्क्रॉलिंग बॉक्स (या व्यूपोर्ट, यदि कोई पूर्वज के पास स्क्रॉल बॉक्स नहीं है) के साथ निकटतम पूर्वज के संबंध में ऊपर या नीचे जाएगा, तो इसके युक्त तत्व की सीमा तक सीमित होगा।

जब तक इसका कंटेनर इससे अधिक लंबा न हो जाए, और आपके पास स्क्रॉल करने के लिए पर्याप्त सामग्री न हो, तब तक topकिसी stickyपोजिशन एलिमेंट पर सेट करना ज्यादा मायने नहीं रखता। जैसे fixedआप स्क्रॉल करते हैं , वैसे ही तत्व देखने में रहेगा। इसके विपरीत fixed, तत्व के तत्व के किनारों तक पहुंचने के बाद तत्व दृश्य से बाहर हो जाएगा।

पेन
स्क्रॉलिंग देखें :
CodePen पर CSS-Tricks (@ css-tricks) द्वारा स्थिर बनाम स्थिर ।

गोचर

विपरीत पक्षों की स्थापना

आप में से प्रत्येक के लिए एक मूल्य निर्धारित कर सकते हैं top, bottom, left, और rightपर एक ही तत्व। आप विपरीत दिशा (के लिए मान सेट करते हैं topऔर bottom, या leftऔर right), परिणाम हमेशा आप क्या अपेक्षा न हो।

ज्यादातर मामलों में, bottomअगर topपहले से ही सेट है, rightतो नजरअंदाज कर दिया जाता है और अगर leftपहले से ही सेट है तो उसे नजरअंदाज कर दिया जाता है। जब दिशा को rtl(बाएं से दाएं) सेट किया leftजाता है, के बजाय अनदेखा किया जाता है right। प्रत्येक मान के लिए आदेश एक प्रभाव है करने के लिए, तत्व एक होना आवश्यक है positionकरने के लिए सेट absoluteया fixedऔर heightकरने के लिए सेट auto(डिफ़ॉल्ट)।

इस उदाहरण में, हम सेट top, bottom, left, और right`20px` के लिए, और भीतरी बॉक्स के प्रत्येक पक्ष की उम्मीद बाहरी बॉक्स की तरफ से दूर 20px होने के लिए:

CodePen पर
CSS-Tricks (@ css-tricks) द्वारा पेन सेटिंग टॉप, बॉटम, लेफ्ट और राइट
देखें।

जब फिक्स्ड व्यूपोर्ट के सापेक्ष नहीं है

positionसेट के साथ तत्व fixedहमेशा व्यूपोर्ट के संबंध में तैनात नहीं होते हैं। यह अपने निकटतम पूर्वज के सापेक्ष तैनात किया जाएगा transform, एक perspective, या filterसंपत्ति के अलावा किसी अन्य चीज़ के लिए सेट none, यदि कोई मौजूद है।

स्थान जोड़ना या निकालना

यदि आपने एक तत्व पोस्ट किया है और पाया है कि अब एक खाली जगह है या पर्याप्त स्थान नहीं है जहाँ आपको उम्मीद थी, तो यह उस तत्व के साथ या बाहर दस्तावेज़ के प्रवाह में हो सकता है।

जब किसी तत्व को दस्तावेज़ के प्रवाह से बाहर ले जाया जाता है, तो इसका मतलब है कि यह मूल रूप से पृष्ठ पर लिया गया स्थान गायब हो जाता है। यह वह स्थिति है जब कोई तत्व तैनात होता है absoluteया fixed। इस उदाहरण में, बिल्कुल तैनात तत्व का युक्त बॉक्स ध्वस्त हो गया है क्योंकि दस्तावेज़ के प्रवाह से बिल्कुल तैनात तत्व को हटा दिया गया था:

CodePen पर Matsuko Friedland (@missmatsuko) द्वारा पेन दस्तावेज़ प्रवाह देखें
।

ब्राउज़र का समर्थन

आप एक नज़र डाल सकते हैं, लेकिन topसंपत्ति के लिए कोई क्रॉस-ब्राउज़र चिंताएं नहीं हैं। वसीयत में उपयोग करें।