दिलचस्प पोस्ट
openCV प्रोग्राम संकलन त्रुटि "libopencv_core.so.2.4: साझा ऑब्जेक्ट फ़ाइल नहीं खोल सकता: ऐसी कोई फ़ाइल या निर्देशिका नहीं" उबुंटू 12.04 में कस्टम एडाप्टर और फिल्टर के साथ स्वत: पूर्णतथाचित्र देखें Cronjob या MySQL घटना? शाखा चेकआउट के बीच गिट – स्यूम-अपरिवर्तित फ़ाइलों को सुरक्षित रखें एक सूची <X> से सूची के लिए <Y> कास्टिंग के लिए छोटे सिंटैक्स? ImportError: DLL लोड विफल:% 1 वैध Win32 अनुप्रयोग नहीं है कमांड लाइन का उपयोग कर पोस्टग्रे बैकअप फ़ाइल को पुनर्स्थापित करें? क्या कोई फजी खोज या स्ट्रिंग समानता फ़ंक्शन लाइब्रेरीज़ सी # के लिए लिखी गई हैं? जावास्क्रिप्ट में रेंज बनाना – अजीब वाक्यविन्यास मैं Windows बैच स्क्रिप्ट में फ़ाइल का आकार कैसे देख सकता / सकती हूं? सी ++ एसटीएल इतनी भारी क्यों टेम्पलेट पर आधारित है? (और * इंटरफेस पर नहीं *) .NET Framework 4.5 निर्देशिका कहाँ है? Node.JS का उपयोग करना, मैं कैसे (सर्वर) मेमोरी में एक JSON ऑब्जेक्ट पढ़ सकता हूं? InstallUtil.exe के बिना एक .NET विंडो सेवा स्थापित करें असाइनमेंट से पहले संदर्भित स्थानीय (?) चर

CSS का उपयोग करके उसके कंटेनर के सापेक्ष एक HTML तत्व की स्थिति

मैं एचटीएमएल और सीएसएस का प्रयोग करके क्षैतिज 100% स्टैक्ड बार ग्राफ बनाने की कोशिश कर रहा हूं। मैं पृष्ठभूमि के साथ डीआईवी का उपयोग करके सलाखों को बनाना चाहता हूं और मैं उन मानों के आधार पर प्रतिशत चौड़ाई जो ग्राफ करना चाहता हूं। मैं ग्राफ के साथ एक मनमाना स्थिति को चिह्नित करने के लिए एक ग्रिड लाइनें भी चाहता हूं।

मेरे प्रयोग में, मैं सीएसएस संपत्ति float: left को निर्दिष्ट करके पहले से ही क्षैतिज रूप से स्टैक को बार-बार मिल चुका हूं float: left हालांकि, मैं उस से बचने के लिए चाहूंगा, क्योंकि यह वास्तव में भ्रामक तरीके से लेआउट के साथ गंदगी लगता है इसके अलावा, ग्रिड लाइनें बहुत अच्छी तरह से काम नहीं करती हैं जब सलाखों को चालू किया जाता है

मुझे लगता है कि सीएसएस पोजीशनिंग इस को संभालने में सक्षम होना चाहिए, लेकिन मुझे अभी तक यह नहीं पता कि यह कैसे करना है। मैं उनके कंटेनर के शीर्ष-बाएं कोने के सापेक्ष कई तत्वों की स्थिति को निर्दिष्ट करने में सक्षम होना चाहता हूं। मैं नियमित रूप से इस प्रकार की समस्या में चला जाता हूं (यहां तक ​​कि इस विशेष ग्राफ़ परियोजना के बाहर), इसलिए मैं एक विधि चाहूंगा:

  1. क्रॉस-ब्राउज़र (आदर्श रूप से बिना कई ब्राउज़र के हैक्स)
  2. Quirks मोड में चलाता है
  3. अनुकूलन की सुविधा के लिए, जितना संभव हो उतना स्पष्ट / साफ
  4. यदि संभव हो तो जावास्क्रिप्ट के बिना किया गया

वेब के समाधान से एकत्रित समाधान "CSS का उपयोग करके उसके कंटेनर के सापेक्ष एक HTML तत्व की स्थिति"

आप सही हैं कि सीएसएस स्थिति का रास्ता तय करना है यहाँ एक त्वरित रन है:

position: relative एक तत्व अपने आप से position: relative होगा दूसरे शब्दों में, तत्वों को सामान्य प्रवाह में रखा जाता है, फिर इसे सामान्य प्रवाह से हटा दिया जाता है और जो कुछ भी आपने निर्दिष्ट किया है (शीर्ष, दायां, नीचे, बाएं) यह ध्यान देना महत्वपूर्ण है कि क्योंकि इसे प्रवाह से हटा दिया गया है, इसके आस-पास के अन्य तत्व इसके साथ नहीं बदलेगा (यदि आप इस व्यवहार को चाहते हैं तो इसके बजाय नकारात्मक हाशिए का उपयोग करें)।

हालांकि, आपको position: absolute में सबसे ज्यादा दिलचस्पी है position: absolute जो एक कंटेनर के सापेक्ष किसी तत्व की स्थिति बनाएगा। डिफ़ॉल्ट रूप से, कंटेनर ब्राउज़र खिड़की है, लेकिन यदि कोई मूल तत्व या तो position: relative या position: absolute उस पर position: absolute सेट, तो यह उसके बच्चों के लिए स्थिति निर्देशांक के लिए अभिभावक के रूप में कार्य करेगा।

प्रदर्शित करना:

 <div id="container"> <div id="box"> </div> </div> 
 #container { position: relative; } #box { position: absolute; top: 100px; left: 50px; } 

उस उदाहरण में, #box के शीर्ष बाएं कोने में 100px नीचे और #container के शीर्ष बाएं कोने से 50px बचे होगा यदि #container position: relative नहीं है position: relative सेट, #box के निर्देशांक ब्राउज़र व्यू पोर्ट के शीर्ष बाएं कोने के सापेक्ष होगा।

उम्मीद है की वो मदद करदे।

आपको बच्चे के कंटेनर की स्थिति के साथ ही मूल कंटेनर की स्थिति को स्पष्ट रूप से सेट करना होगा। ऐसा करने का विशिष्ट तरीका ऐसा कुछ है:

 div.parent{ position: relative; left: 0px; /* stick it wherever it was positioned by default */ top: 0px; } div.child{ position: absolute; left: 10px; top: 10px; } 

निरपेक्ष स्थिति स्थितियों को उसके निकटतम स्थित पूर्वजों के सापेक्ष एक तत्व। तो रखो position: relative कंटेनर पर position: relative , फिर बच्चे के तत्वों के लिए top और left कंटेनर के ऊपर-बायीं के सापेक्ष हो जाएंगे, जब तक बाल तत्वों की position: absolute । अधिक जानकारी सीएसएस 2.1 विनिर्देश में उपलब्ध है।

मुझे पता है मुझे देर हो चुकी है लेकिन उम्मीद है कि यह मदद करता है।

स्थिति संपत्ति के लिए मूल्य निम्न हैं

  • स्थिर
  • स्थिर
  • सापेक्ष
  • पूर्ण

स्थिति: स्थिर

यह डिफ़ॉल्ट है इसका मतलब है कि तत्व ऐसी स्थिति में हो जाएगा जो सामान्य रूप से होता।

 #myelem { position : static; } 

स्थिति: तय

इससे ब्राउज़र विंडो (व्यूपोर्ट) के संबंध में एक तत्व की स्थिति निर्धारित की जाएगी। एक निश्चित स्थिति वाला तत्व उसकी स्थिति में रहेगा, तब भी जब पृष्ठ स्क्रॉल

(आदर्श यदि आप पृष्ठ के निचले दाएं कोने में स्क्रॉल-टू-टॉप बटन चाहते हैं)

 #myelem { position : fixed; bottom : 30px; right : 30px; } 

स्थिति: रिश्तेदार

एक मूल स्थान के आधार पर एक नए स्थान पर एक तत्व रखने के लिए।

 #myelem { position : relative; left : 30px; top : 30px; } 

उपरोक्त सीएसएस अपने वास्तविक स्थान के शीर्ष से #myelem तत्व 30px को बाएं और 30px स्थानांतरित कर देगा।

स्थिति: निरपेक्ष

यदि हम चाहते हैं कि किसी तत्व को पृष्ठ में एक सटीक स्थिति में रखा जाए।

 #myelem { position : absolute; top : 30px; left : 300px; } 

उपरोक्त सीएसएस पृष्ठ में बाईं ओर से ऊपर और 300px से स्थिति # 30mx पर #myelem तत्व की स्थिति में होगा और यह पृष्ठ के साथ स्क्रॉल करेगा।

और अंत में…

स्थिति रिश्तेदार + पूर्ण

हम एक मूल तत्व की स्थिति संपत्ति को रिश्तेदार पर सेट कर सकते हैं और फिर बाल तत्व की स्थिति गुण को पूर्ण में सेट कर सकते हैं। इस तरह हम एक पूर्ण स्थिति में माता-पिता के सापेक्ष बच्चे को स्थान दे सकते हैं।

 #container { position : relative; } #div-2 { position : absolute; top : 0; right : 0; } 

एक बाल तत्व w.r.t. की पूर्ण स्थिति एक रिश्तेदार स्थित मूल तत्व

हम ऊपर की छवि में देख सकते हैं # div-2 तत्व # कंटेनर तत्व के अंदर शीर्ष-दाएं कोने पर स्थित है

GitHub: आप यहां ऊपर की छवि का HTML पा सकते हैं और यहां सीएसएस।

उम्मीद है कि इस ट्यूटोरियल में मदद करता है