स्थिति के साथ सभी चार पोजीशनिंग पैरामीटर का उपयोग करना: पूर्ण - क्या यह स्वीकार्य है?

Question

मैंने another question के उत्तर के रूप में ओवरले सीएसएस प्रदान करने के लिए यह विचार प्रदान किया। मैंने अतीत में इस तरह के वाक्यविन्यास का उपयोग करने के बारे में सोचा नहीं था, लेकिन मैं इसका उपयोग करने के साथ जुड़े किसी भी समस्या के बारे में नहीं सोच सकता।

जहां तक ​​मैं यह काम कह सकता हूं - और यदि स्वीकार्य है तो मुझे लगता है कि यह एक अभिनव समाधान प्रदान करता है - लेकिन मुझे अक्सर यह उपयोग नहीं होता है।

कोई कारण है कि यह बुरा हो सकता है मुझे समझा सकते हैं?

.ui-widget-overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 

    background-color: #444; 

    /* add some opacity here */ 
} 

Answer 1

शाखाओं में इस आधारित है specके लिए गैर प्रतिस्थापित तत्वों (एक div एक गैर प्रतिस्थापित तत्व है):

तो तीनों 'छोड़', ' चौड़ाई ', और ' सही ऑटो 'कर रहे हैं': ऑटो 'के मानों' 'सबसे पहले किसी भी सेट' मार्जिन छोड़ दिया 'और ' मार्जिन-सही '0 पर तो फिर, अगर ' दिशा 'तत्व की संपत्ति स्थैतिक स्थिति स्थापित करने वाला ब्लॉक 'ltr' सेट 'बाएं'है स्थिर स्थिति मेंऔर नियम नीचे तीन नंबर लागू करें; अन्यथा, स्थिर स्थिति में 'दाएं' सेट करें और नीचे नियम संख्या लागू करें।

(के बाद से सभी 3 गुण स्वत: नहीं कर रहे हैं, ऊपर हालत से मुलाकात नहीं की है)

तो तीन में से कोई भी 'ऑटो' है: अगर दोनों 'मार्जिन छोड़ दिया' और ' मार्जिन-सही ' हैं' ऑटो लीटर ', अतिरिक्त बाधा है कि दो मार्जिन बराबर मान मिलता है, जब तक कि इस उन्हें नकारात्मक होगा, जो मामले में युक्त ब्लॉक की दिशा है जब तहत समीकरण को हल' ('आरटीएल'), सेट शून्य को 'मार्जिन छोड़ दिया' ('मार्जिन-सही') और 'मार्जिन-सही' ('मार्जिन छोड़ दिया') के लिए हल। यदि में से एक 'मार्जिन छोड़ दिया' या 'मार्जिन-सही' 'ऑटो' है, कि मूल्य के लिए समीकरण को हल। मूल्यों से अधिक विवश कर रहे हैं, 'छोड़' या 'सही' (मामले में 'दिशा' वाले ब्लॉक के संपत्ति 'rtl' है) (मामले में 'दिशा' है 'लीटर के लिए मूल्य की अनदेखी ') और उस मूल्य के लिए हल करें।

(के बाद से चौड़ाई ऑटो है, ऊपर हालत पूरा नहीं होता है)

अन्यथा, के लिए 'मार्जिन छोड़ दिया' और 'मार्जिन-सही' 0 करने के लिए 'ऑटो' मूल्यों को निर्धारित, और लागू होने वाले छह छः नियमों में से एक चुनें।

1. 'छोड़' और 'चौड़ाई' हैं 'ऑटो' और 'सही:

(ऊपर हालत पूरा किया जाता है)

और इसलिए हम इन 6 के साथ छोड़ दिया रहे हैं 'ऑटो' नहीं है, तो चौड़ाई सिकुड़ने के लिए फिट है। फिर 'बाएं'

'बाएं' और 'दाएं' हैं 'ऑटो' और 'चौड़ाई' 'ऑटो' नहीं है, तो यदि ब्लॉक की स्थैतिक स्थिति स्थापित करने वाले तत्व की 'दिशा' संपत्ति है, तो हल करें स्थिर स्थिति में 'ltr' सेट 'बाएं', अन्यथा स्थिर स्थिति में 'दाएं' सेट करें। फिर 'बाएं' (यदि 'दिशा' आरटीएल ') या' दाएं '(यदि' दिशा '' ltr 'है) के लिए हल करें।

'चौड़ाई' और 'दाएं' हैं 'ऑटो' और 'बाएं' 'ऑटो' नहीं है, तो चौड़ाई कम हो जाती है। तो फिर 'सही'

'छोड़' 'ऑटो', 'चौड़ाई' और 'सही' नहीं हैं 'ऑटो', फिर 'छोड़' के लिए हल

'चौड़ाई' है 'ऑटो के लिए हल ',' छोड़ 'और' सही ऑटो 'नहीं हैं', तो के लिए हल 'चौड़ाई'

'सही ऑटो' है '', 'छोड़' और 'चौड़ाई ऑटो' है, तो हल 'नहीं कर रहे हैं' 'दाएं'

उपरोक्त के आधार पर उस तत्व की चौड़ाई ऑटो है और इसलिए यदि आप बाएं और दाएं निर्दिष्ट करते हैं तो यह चौड़ाई के लिए हल हो जाता है, इसलिए यह मान्य होना चाहिए।

तो जब यह सीएसएस 2.1/CSS3 spec के अनुसार पूरी तरह मान्य है, तो यह आईई 6 में काम करने में विफल रहता है। यह आईई 7, आईई 8, फ़ायरफ़ॉक्स 3 और क्रोम में काम करता है।

Answer 2

मैं सवाल पूछने के लिए लगता है कि क्या लाभ इस पर अपने समाधान का उपयोग करके वहाँ है:

.ui-widget-overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100% 
} 

कौन सा अधिक संगत और पढ़ने में आसान है। जबकि आपका एक और अभिनव समाधान है, यह अप्रत्याशित सीएसएस व्यवहार की तरह लगता है कि इसकी सीमा निर्धारित करके तत्व की चौड़ाई/ऊंचाई निर्धारित करें, और भविष्य में ब्राउज़र के कार्यान्वयन इस मामले के लिए बदल सकता है।

Answer 3

आपका समाधान does not work with images, iframes और अन्य replaced elements।

ऐसा इसलिए है क्योंकि सीएसएस मानक प्रतिस्थापित तत्वों पर एक अलग आयाम गणना तंत्र लगाता है। (बोरिंग चश्मा: http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width)