एक div फ्लोट पर रिश्तेदार स्थिति के साथ एक div

मुझे समझ में नहीं आता कि फ्लोट दाएं या बाएं वाला एक div रिश्तेदार स्थिति के साथ एक div से ऊपर नहीं है या आखिरी बार घोषित होने पर पृष्ठभूमि रंग के साथ परिभाषित किया गया है। यहाँएक div फ्लोट पर रिश्तेदार स्थिति के साथ एक div

<html> 
<body> 
    <div class="container"> 
     Main container <br/><br/> 

     <div class="header">This is the header</div> 
     <div class="text-right">Right text</div> 
     <div class="footer">This is the footer</div> 
    </div> 
</body>

और सीएसएस है:

यहाँ एचटीएमएल है

.header { 
    background-color:blue; 
    border: solid; 
    color: white; 
    border-color:black; 
    height: 100px; 
} 

.text-right{ 
    float: right; 
    border: solid; 
    background-color: green; 
} 

.container{ 
    padding: 10px; 
    border: solid; 
} 

.footer{ 
    padding-top: 50px; 
    border: solid; 
    background-color: yellow; 
    position: relative; 
}

मुझे पता है कि मैं एक .clear उपयोग कर सकते हैं: इस समस्या को ठीक करने के लिए दोनों नियम लेकिन मेरा मुख्य बिंदु यह है: जब मैं पृष्ठभूमि-रंग या स्थिति या दोनों .footer नियम में सेट करता हूं, तो फ्लोट div पाद लेख के नीचे होता है?

बहुत बहुत धन्यवाद!

स्रोत

2011-12-22 Samuel

यहां एक सामान्य JSFiddle उदाहरण है जो एक ही समस्या दिखाता है: http://jsfiddle.net/5Kefa/5/ – KajMagnus

यह बहुत अच्छा post पढ़ते समय पोस्ट के अंत में,, ज़ेड-ऑर्डर आंतरिक कार्य के बारे में लेखक वार्ता लेकिन यह भी कहते हैं कि तुम अधिक जानने के लिए, this next one will be a much more detailed article

प्रमुख मुद्दा यह है कि चाहते हैं जेड-अक्ष में ऑर्डर करें जहां तत्व डाले जाते हैं।

हम किसी भी z- सूचकांक मान निर्दिष्ट नहीं करते हैं, तो डिफ़ॉल्ट करीबी से उपयोगकर्ता के लिए आदेश स्टैकिंग वापस है दूर करने के लिए इस प्रकार है::

यहाँ लेखक कहते है
1. Positioned elements, in order of appearance in source code 
2. Inline elements 
3. Non-positioned floating elements, in order of appearance in source code 
4. All non-positioned, non-floating, block elements in order of source code 
5. Root element backgrounds and borders 

जैसा कि हम देख सकते हैं, तैनात तत्व (1) हमेशा गैर-स्थित तत्वों (3-4) के शीर्ष पर होते हैं। यदि मैंने div को केवल float संपत्ति के साथ रखा है, तो यह तत्व सतह पर "स्थानांतरित" नहीं होगा।

इस मामले में, दूसरा तत्व है, मेरे पाद लेख div, कि एक रिश्तेदार संपत्ति के मूल्य के साथ रखा जाता है पिछले एक के शीर्ष पर होगा न सिर्फ मैं floatdiv संपत्ति के बाद या क्योंकि एक clear: both संपत्ति में शामिल न करें आखिरी वाला फ्लोटिंग तत्व के बाद जोड़ा जाता है लेकिन क्योंकि यह स्थित है!

पावरबॉय की तरह कहा, आपको फ्लोटिंग तत्व के सापेक्ष एक स्थिति जोड़ने के लिए फ़्लोटिंग तत्व के ढेर के शीर्ष पर जाने में सक्षम होना चाहिए। लेकिन यह पर्याप्त नहीं है। चूंकि ये दो तत्व अब एक ही स्तर पर हैं और क्योंकि वे दोनों एक दूसरे को पार कर रहे हैं, आपको इंजन को बताना होगा कि कौन सा पहला होगा और यही कारण है कि आपको ज़ेड-ऑर्डर को फ्लोटिंग एलिमेंट में फिर से सेट करना होगा powerbuoy।

मैं बहुत अच्छा लेखक नहीं हूं और इस कारण से, मैं दृढ़ता से आपको संदर्भित लेखों को पढ़ने का सुझाव देता हूं जो मैंने पहले उल्लेख किया था। मुझे लगता है कि आपको मामले की गहरी व्याख्या होगी।

स्रोत

2011-12-24 16:16:44 Samuel

मेरा खुद का प्रश्न स्वीकार करने के लिए खेद है, लेकिन मुझे लगता है कि यह सही जवाब है और कोई भी विपरीत नहीं कहता है। – Samuel

((इस विस्तृत उत्तर को पोस्ट करने के लिए बहुत बहुत धन्यवाद!)) – KajMagnus

http://jsfiddle.net/wxMhx/ को ध्यान में रखते हुए। हम्म, यदि आप 'id = text-right'' में 'स्थिति: सापेक्ष;' जोड़ते हैं, तो 'id = footer' अभी भी 'टेक्स्ट-दाएं' से ऊपर दिखाई देता है। यद्यपि अस्थायी ग्यारह में अब 'स्थिति: रिश्तेदार' है, इसलिए फ़्लोटिंग एटीएम और 'आईडी = पाद लेख' दोनों स्थित हैं। तो नियम 1 लागू होना चाहिए? - ** हालांकि ** फ़्लोटिंग एडीएम ** स्रोत में पहले ** दिखाई देता है, और इसलिए आपके उदाहरण में ** ** आईडी = पाद लेख (नियम 1 के अनुसार) से ऊपर ** स्टैक किया जाना चाहिए, है ना? फिर 'id = text-right' क्यों है, फिर भी 'फूटर' द्वारा अजीब, अजीब है। (यह जेड-इंडेक्स नियम हटा दिया गया है) (Google क्रोम 1 9) – KajMagnus

चूंकि के बाद पाठक दाईं ओर टेक्स्ट-दाएं के शीर्ष पर प्रस्तुत किया जाएगा।

http://jsfiddle.net/wxMhx/

संपादित करें:: इससे बचने के लिए आप पाठ सही z- इंडेक्स (और एक स्थिति स्थिर अलावा अन्य) दे सकते हैं हममम ... नहीं है कि पूरी तरह से सही नहीं है। यदि आप स्थिति हटाते हैं: रिश्तेदार; पाद लेख पाठ से दाएं इसे शीर्ष पर प्रस्तुत किया जाएगा। टीबीएच मुझे यकीन नहीं है कि क्यों ऐसा होता है। लेकिन किसी भी मामले में समाधान या तो स्थिति को हटा देना है: रिश्तेदार; पाद लेख से, या इसे टेक्स्ट-दाएं में जोड़ें (साथ ही एक जेड-इंडेक्स)।

स्रोत

2011-12-22 13:47:45 powerbuoy

आपके समय के लिए धन्यवाद ... मैंने वेब पर बहुत कुछ पढ़ा और यह वाक्य पाया: "तो व्यवहार का उद्देश्य पहले इसे फ़्लोट करना है, और उस स्थान के अन्य तत्वों को प्रभावित करना है और केवल तभी इसे अन्य तत्वों की स्थिति को प्रभावित किए बिना एक नई स्थानांतरित स्थिति में ले जाएं। " आपने जो कहा है, उसके साथ, मैं समझता हूं कि जब आप एक div फ्लोट को रिश्तेदार स्थिति के साथ एक और div के बाद रखते हैं, तो पिछली बार पृष्ठभूमि-रंग सेट होने पर पिछला छुपाएगा। यह एक आम स्थिति है या क्या मुझे कुछ गड़बड़ है? – Samuel

यहां तक कि पृष्ठभूमि छवि के बिना टेक्स्ट-दाएं पाद लेख के पीछे है लेकिन यह अभी भी दिखाई दे रहा है क्योंकि इसमें कुछ भी शीर्ष नहीं है। स्थिति: रिश्तेदार मुझे लगता है कि लेयरिंग ट्रिगर करता है। मुझे डर है मैं नहीं जानता कि क्यों। लेकिन मुझे जानना रूचि होगी। – powerbuoy

क्योंकि position: relative। यदि आप इस लाइन को हटाते हैं तो आपको divtext-right कक्षा के साथ दिखाई देगा। आप z-index: -1; को footer कक्षा पर सेट कर सकते हैं और यह भी काम करना चाहिए।

स्रोत

2011-12-22 13:51:59 Lucas

धन्यवाद लेकिन जैसा कि मैंने अपने प्रश्न में कहा था, मैं जानना चाहता हूं कि ऐसा क्यों होता है, समस्या को ठीक करने का तरीका नहीं। – Samuel

एक div फ्लोट पर रिश्तेदार स्थिति के साथ एक div

उत्तर

संबंधित मुद्दे