एक तत्व को उसके कंटेनर के सापेक्ष रखें

Question

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

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

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

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

Comments

क्या आपको इसे HTML में करना है? क्या आप इसके बजाय Google चार्ट का उपयोग कर सकते हैं? code.google.com/apis/chart/#bar_charts

— सैम हसलर

Answer 1

आप सही हैं कि CSS पोज़िशन जाने का रास्ता है। यहाँ एक त्वरित रन डाउन है:

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

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

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

#container {
  position: relative;
  border: 1px solid red;
  height: 100px;
}

#box {
  position: absolute;
  top: 50px;
  left: 20px;
}

<div id="container">
  <div id="box">absolute</div>
</div>

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

Comments

: इस घटना के इस पृष्ठ में पता चलता है अच्छा चित्र css-tricks.com/absolute-positioning-inside-relative-positioning

— DarenW

Answer 2

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

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

div.child{
    position: absolute;
    left: 10px;
    top: 10px;
}

Comments

यदि वे शून्य हैं, तो आपको अपेक्षाकृत तैनात तत्वों के लिए शीर्ष या बाएं गुण मान प्रदान करने की आवश्यकता नहीं है।

— जिम

मौजूदा ब्राउज़रों के लिए सही है लेकिन विनिर्देश में परिभाषित नहीं है।

— स्टीफन डेकेन

यह निश्चित रूप से विनिर्देश में परिभाषित किया गया है। खंड 9.4.3 पढ़ें और गुणों के लिए प्रारंभिक मान जांचें।

— जिम

9.4.3 का कहना है कि बाएं और शीर्ष के शुरुआती मूल्य 'ऑटो' हैं। 'ऑटो' मानों के साथ जो होता है उसकी परिभाषा जटिल है, और मैं कभी भी उन्हें पूरी तरह से समझ नहीं पाया। अगर आप कहते हैं कि मैं इसके लिए अपना शब्द ले जाऊंगा, तो यह शून्य होने पर हवा करता है।

— स्टीफन डेकेन

Answer 3

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

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

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

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

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

#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;
}

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

और अंत में...

स्थिति सापेक्ष + निरपेक्ष

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

#container {
    position : relative;
}

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

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

GitHub: आप उपरोक्त छवि का HTML यहाँ और CSS यहाँ पा सकते हैं ।

आशा है कि यह ट्यूटोरियल मदद करता है।

Answer 4

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

Answer 5

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

इसलिए यदि आप अपने बाल तत्व को मूल कंटेनर के ऊपर बाईं ओर रखना चाहते हैं, तो आपको यह करना चाहिए:

.parent {
  position: relative;
} 

.child {
  position: absolute;
  top: 0;
  left: 0;  
}

इस लेख को पढ़ने से आपको बहुत फायदा होगा । उम्मीद है की यह मदद करेगा!