html - Why Is my div going under another element when I give It a negative margin -

इसलिए मेरे पास एक div (। अनुभाग-पृष्ठ-लेआउट) एक हाशिया के साथ (मार्जिन-टॉप: -200 पीएक्स) और div (अनुभाग-पृष्ठ-लेआउट) div (। अनुभाग-पृष्ठ-हैडर) के अंतर्गत जा रहा है जहां इसे खत्म हो जाना चाहिए मैंने एक डेमो लिंक पर कोड अपलोड किया था, जहां आप इसे फायरबग या व्हाटॉट के साथ देख सकते हैं। मैंने अपना कोड भी शामिल किया है।

धन्यवाद अग्रिम!

सीएसएस कोड

  / * हैडर * / / अनुभाग-पेज-हैडर {पृष्ठभूमि: यूआरएल ("../ img / frontcover.jpg") नो-दोहराना; पृष्ठभूमि आकार: कवर; चौड़ाई: ऑटो; ऊंचाई: ऑटो; न्यूनतम ऊंचाई: 727px; न्यूनतम-चौड़ाई: 1280 पिक्सेल; }। अनुभाग पृष्ठ-हैदर-शीर्षक_कंटेनर {चौड़ाई: 1280px; स्थिति: रिश्तेदार; मार्जिन: 0 ऑटो; }। अनुभाग पृष्ठ-हैडर-शीर्षक {मार्जिन-शीर्ष: 83px; सीमा-शीर्ष: 7px # 5b461c ठोस; चौड़ाई: 1170 पीएक्स; बाईंओर तैरना; ऊंचाई: 167 पिक्सेल; पृष्ठभूमि: # 000000; -वेबकिट-सीमा-त्रिज्या: 0 पिक्स 0 पिक्सल 50 पिक्स 0 पिक्स; सीमा-त्रिज्या: 0 पिक्सेल 0 पिक्सल 50 पिक्स 0 पिक्स; / * IE 8 * / -ms-filter: "प्रॉडिड: डीएक्सआईमेजट्रान्सफ़ॉर्म। माइक्रोसॉफ्ट। एल्फा (अस्पष्टता = 90)"; / * IE 5-7 * / फिल्टर: अल्फा (अस्पष्टता = 90); / * गीको * / -मोज-ऑपिसिटी: 0.9; / * सफारी 1.x * / -khtml-opacity: 0.9; / * CSS3 * / अस्पष्टता: 0.9; } .section-page-header-title h1 {font-family: 'QuicksandBook';; मार्जिन-बाएं: 147px; मार्जिन-टॉप: 46 पीएक्स; फ़ॉन्ट-आकार: 50px; रंग: # एफएफएफएफएफएफ; टेक्स्ट-ट्रांस्फ़ॉर्म: अपरकेस; }। सेक्शन-पेज-हेडर-शीर्षक p {मार्जिन-टॉप: 12px; मार्जिन-बाएं: 147px; फ़ॉन्ट-परिवार: 'जंक्शन रिज्यूलर रीगलर'; रंग: # एफएफ 9900; टेक्स्ट-ट्रांस्फ़ॉर्म: अपरकेस; }। अनुभाग पृष्ठ-लेआउट-कंटेनर {पृष्ठभूमि: # 984B09; पृष्ठभूमि: url ('../ img / section-page-oj_gradient-background.png') दोहराव- y; पृष्ठभूमि का आकार: होता है; चौड़ाई: 100%; छिपा हुआ सैलाब; }। अनुभाग पृष्ठ-लेआउट {width: 1280px; स्थिति: रिश्तेदार; मार्जिन: 0 ऑटो; ऊंचाई: ऑटो; अतिप्रवाह: दृश्यमान; मार्जिन टॉप: -200px; } .left-section-container {width: 585px; ऊंचाई: 500 पीएक्स; पृष्ठभूमि: # एफएफएफएफएफएफ; बाईंओर तैरना; }   
 HTML कोड  
  & lt;! - =============== === अनुभाग पृष्ठ टेम्पलेट =============== - & gt; & Lt; शीर्ष लेख = "अनुभाग-पृष्ठ-शीर्षक" & gt; & Lt; div class = "section-page-header-title_container" & gt; & Lt; div class = "section-page-header-title" & gt; & Lt; h1 & gt; ABOUT & lt; b & gt; यूएस & lt; / b & gt; & lt; / h1 & gt; & Lt; p & gt; हमारी कंपनी में एक सरल नज़र & lt; / p & gt; & Lt; / div & gt; & Lt; / div & gt; & Lt; / हैडर & gt; & Lt; अनुभाग वर्ग = "अनुभाग-पृष्ठ-लेआउट-कंटेनर" & gt; & Lt; div वर्ग = "अनुभाग-पृष्ठ-लेआउट" & gt; & Lt; div वर्ग = "बाएं-अनुभाग-कंटेनर" & gt; & LT; हैडर & gt; & Lt; / हैडर & gt; & Lt; div वर्ग = "बायां-अनुभाग" & gt; & Lt; / div & gt; & Lt; / div & gt; & Lt; div class = "right-module-section" & gt; & Lt; / div & gt; & Lt; / div & gt; & Lt; / अनुभाग & gt; & Lt; div वर्ग = "स्पष्ट" & gt; & lt;! - साफ़ करें - & gt; & lt; / div & gt;    
 
 
 यदि आपके पास  अतिप्रवाह है: छुपा  एक मूल तत्व पर तब जब आप बच्चे को माता-पिता से बाहर ले जाते हैं, तो यह छिपा होगा।