अपेक्षाकृत स्थानित तत्व द्वारा छोड़ी गई जगह के लिए क्षतिपूर्ति कैसे करें?

Question

(एक मेस बनाने के बिना) मैं इन तीन तत्वों है:

अब, मेरी लेआउट जनादेश उस तत्व .b (वैसे, अगर यह महत्वपूर्ण है, वे सब एचटीएमएल रहे <section> रों) कुछ हद तक है तत्व .a पर superimposed। तो मैं को लागू करने का निर्णय लेता हूं, फिर top: -50px का उपयोग करके इसे अपनाना चाहता हूं।

यह क्या होता है:

मैं सफलतापूर्वक दो शीर्ष तत्वों आरोपित, लेकिन अब मैं .b और .c के बीच एक अनावश्यक 50px स्थान बनाया। (उन्हें एक साथ चिपकाया जाना चाहिए था।)

मेरा पहला अनुमान समकक्ष margin-bottom: -50px लागू करना था, लेकिन यह काम नहीं करता था, किसी कारण से मुझे भी पता नहीं था।

आखिरकार मैंने के बच्चे को .b बनाकर इसे चौराहे के रास्ते में हल किया। इसने को .c से ऊपर ओवरफ़्लो के कारण बनाया, लेकिन फिर मैंने .c को नीचे धक्का देने के लिए margin-bottom की एक जादू संख्या राशि लागू की।

बेशक, मैं इस समाधान से खुश नहीं हूं, इसलिए मैं यहां पूछ रहा हूं।

इसका समाधान करने का सबसे अच्छा तरीका क्या होगा?

तक का सबसे अच्छा तरीका मेरा मतलब है मैं से बचना चाहते हैं, यदि संभव हो तो:

• अतिरिक्त nonsemantic मार्कअप
• पेज
• पर बाद के सभी तत्वों के लिए एक ही top: -50px नियम लागू करने के निर्माण का उपयोग कर मेरे सीएसएस पर किसी भी प्रकार का जादू नंबर।

मैं इस से निपटने के दौरान सबसे अच्छा अभ्यास सीखना चाहता हूं, क्योंकि मुझे लगता है कि यह एक समस्या होगी, मुझे भविष्य में और अधिक बार सामना करना पड़ेगा।

Answer 1

इसके बजाय स्थापित करने की

top: -50px; 

बस

margin-top: -50px; 

इस तरह सेट अपने .c अभी भी .b करने के लिए लाठी, और आप कुछ और के साथ गड़बड़ करने के लिए नहीं है।

यहाँ jsfiddle: http://jsfiddle.net/gyrgfqdx/

Answer 2

तो, कई तरीकों से यह पूरा करने के।

मेरा सुझाव उस तत्व पर margin-top का उपयोग करना होगा जिसे आप ओवरफ़्लो करना चाहते हैं। बाकी सब कुछ ठीक से प्रस्तुत करेगा और केवल एक आइटम को ठीक से स्थानांतरित करने की आवश्यकता है।

दृश्य प्रतिनिधित्व:

एचटीएमएल

<div id="one">Item 1</div> 
<div id="two">Item 2</div> 
<div id="three">Item 3</div> 

सीएसएस

#one, #two, #three { 
    position: relative; 
    margin: 0 auto; 
} 
#one { 
    width: 400px; 
    height: 200px; 
    background: #ABC; 
} 
#two { 
    width: 200px; 
    height: 100px; 
    background: #CBA; 
    margin-top: -50px; 
} 
#three { 
    width: 400px; 
    height: 300px; 
    background: #BBB; 
} 

उदाहरण यहाँ प्रदान की:

http://jsfiddle.net/dp83o0vt/