2008-09-19 18 views
159

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

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

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

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

इसे क्विर्क मोड में क्यों चलाना है? –

+2

क्योंकि जिस साइट पर मैं इसे क्विर्क मोड में चलाने के लिए जोड़ रहा हूं और इस दशक में किसी भी समय बदल नहीं रहा हूं। :-P –

+1

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

उत्तर

335

आप सही हैं कि सीएसएस स्थिति चलने का तरीका है। यहां एक त्वरित रन डाउन है:

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 नीचे और 50px #container के ऊपरी बाएं कोने के बाएँ होगा। यदि #container में position: relative सेट नहीं था, तो #box के निर्देशांक ब्राउज़र दृश्य पोर्ट के ऊपरी बाएं कोने से संबंधित होंगे।

आशा है कि मदद करता है।

+7

यह पृष्ठ इस घटना के अच्छे चित्र दिखाता है: http://css-tricks.com/absolute-positioning-inside-relative-positioning/ – DarenW

16

आपको बच्चे के कंटेनर की स्थिति के साथ मूल रूप से मूल कंटेनर की स्थिति निर्धारित करना होगा। अपने निकटतम स्थिति में पूर्वज को

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

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

यदि वे शून्य हैं तो अपेक्षाकृत स्थित तत्वों के लिए आपको शीर्ष या बाएं संपत्ति मान प्रदान करने की आवश्यकता नहीं है। – Jim

+0

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

+0

"मौजूदा ब्राउज़रों के लिए सही" मेरे लिए निश्चित रूप से काफी अच्छा है। –

3

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

4

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

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

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

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

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

#myelem { 
    position : static; 
} 

स्थिति: तय

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

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

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

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

अपनी मूल स्थिति में एक नए स्थान के सापेक्ष में एक तत्व रखने के लिए।

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

उपरोक्त CSS अपने वास्तविक स्थान के ऊपर से छोड़ दिया और 30px को #myelem तत्व 30px आ जाएगा।

स्थिति: पूर्ण

हम एक तत्व चाहते हैं पेज में एक सटीक स्थान पर रखा जाना है।

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

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

और अंत में ...

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

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

#container { 
    position : relative; 
} 

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

Absolute position of a child element w.r.t. a Relative positioned parent element.

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

गिटहब: आप उपर्युक्त छवि here और सीएसएस here का HTML पा सकते हैं।

आशा है कि यह tutorial मदद करता है।