स्थिति: बाएं/ऊपर/दाएं/नीचे निर्दिष्ट नहीं हैं - एफएफ/आईई में वांछित परिणाम, लेकिन सफारी में नहीं

Question

क्षमा करें, अभी तक एक और position:fixed संबंधित प्रश्न पूछना है, लेकिन कई अन्य प्रश्नों और मंच धागे के माध्यम से पढ़ना है इस के साथ मेरी मदद नहीं की है।

निम्नानुसार कोड एक प्रोजेक्ट में position:fixed का उपयोग करने का एक सरल प्रदर्शन है। position:fixed की मेरी मूल (गलत) समझ यह है कि शुरुआत में यह पहले स्थान पर स्थित पैरेंट कंटेनर के सापेक्ष तय करता है, और इसके बाद व्यूपोर्ट स्क्रॉल स्थिति के बावजूद उस स्थिति में रहता है। अब मुझे एहसास है कि यह गलत है: वास्तव में, position:fixed बाह्यतम कंटेनर (यानी html टैग) के सापेक्ष स्थितियां और position:absolute पहले पैरेंट कंटेनर के सापेक्ष स्थितियां जिनके पास static से अधिक की स्थिति है।

एसओ पर कई अन्य प्रश्नों के माध्यम से पढ़ना, मुझे एहसास है कि position:fixed का उपयोग करके मैं जिस प्रभाव को प्राप्त करने का प्रयास कर रहा था वह एक ऐसा है जिसे कई अन्य लोगों ने करने की कोशिश की है, लेकिन फिर सीएसएस के साथ एहसास संभव नहीं है: यानी, एक कंटेनर के सापेक्ष तत्व, लेकिन फिर पृष्ठ पर स्क्रॉल होने पर व्यूपोर्ट के सापेक्ष यह रहता है।

मुझे क्या भ्रमित करता है हालांकि उपरोक्त वही है जो मुझे लगता है - कम से कम एफएफ और आईई 8 पर। नीचे दिए गए कोड उदाहरण के साथ, "निश्चित दाएं फलक सामग्री" प्रारंभ में लाल "केंद्र स्क्रॉल करने योग्य सामग्री" बॉक्स के दाईं ओर स्थित है, और केंद्र सामग्री के शीर्ष के साथ लंबवत स्तर है। केंद्र सामग्री को स्क्रॉल किया जा सकता है, लेकिन दाएं हाथ की सामग्री कहां रहती है, जैसे कि यह प्रारंभ में सामान्य दस्तावेज़ प्रवाह में स्थिर रूप से स्थित है लेकिन उसके बाद व्यूपोर्ट पर स्थिर रहता है।

मैं अब महसूस करते हैं कि इस IE8 और एफएफ में 'काम' बस क्योंकि मैं fixed तत्व को top/bottom/left/right गुण निर्दिष्ट नहीं किया है प्रतीत होता है। अगर मैं करता हूं, तो मुझे एहसास है कि fixed तत्व तुरंत व्यूपोर्ट के सापेक्ष स्थित हो जाता है।

मैंने माना था - शायद खतरनाक रूप से - अब तक यदि रिश्तेदार पदों को निर्दिष्ट नहीं किया गया है, तो position:fixed डिफ़ॉल्ट रूप से उस तत्व को स्थानांतरित करेगा जहां यह सामान्य रूप से स्थिर रूप से रखा जाएगा। ऐसा लगता है कि कम से कम एफएफ और आईई 8 ऐसा ही कर रहे हैं।

सफारी में परीक्षण, हालांकि, दिखाता है कि सफारी अपने कंटेनर के बाईं ओर fixed तत्व रखती है। दूसरे शब्दों में, पोजिशनिंग के बिना, मेरा position:fixed तत्व न तो है जब यह स्थिर रूप से रखा जाएगा, और न ही यह व्यूपोर्ट के सापेक्ष 0,0 पर स्थित है।

क्या मैं आज तक बहुत खराब परिभाषित व्यवहार पर भरोसा कर रहा हूं, और क्या मैं इस निश्चित स्थिति को प्राप्त करने के लिए जावास्क्रिप्ट समाधान का सबसे अच्छा उपयोग कर रहा हूं? या, यह व्यवहार आईई/एफएफ के लिए अच्छी तरह परिभाषित है; और क्या कोई सफारी के प्लेसमेंट के पीछे तर्क को समझा सकता है?

<style type="text/css"> 
 
    #content-centre { 
 
    margin: 0 auto; 
 
    width: 900px; 
 
    } 
 
    
 
    #header { 
 
    height: 55px; 
 
    position: fixed; 
 
    top: 0; 
 
    width: 990px; 
 
    } 
 
    
 
    #left-pane { 
 
    position: fixed; 
 
    top: 12px; 
 
    border: 1px green solid; 
 
    } 
 
    
 
    #main-pane { 
 
    left: 200px; 
 
    position: relative; 
 
    top: 66px; 
 
    width: 760px; 
 
    border: 1px yellow solid; 
 
    } 
 
    
 
    #container-1 { 
 
    border-top: 1px solid #FFFFFF; 
 
    float: right; 
 
    min-width: 130px; 
 
    padding-left: 20px; 
 
    border: 1px blue solid; 
 
    } 
 
    
 
    #container-0 { 
 
    margin-right: 20px; 
 
    min-height: 470px; 
 
    overflow: auto; 
 
    padding: 10px 0; 
 
    position: relative; 
 
    border: 1px red solid; 
 
    } 
 
    
 
    .side-info-list-fixer { 
 
    position: fixed; 
 
    } 
 
</style> 
 

 
<div id="content-centre"> 
 

 
    <div id="header"> 
 
    </div> 
 

 
    <div id="left-pane"> 
 
    Fixed left pane content 
 
    </div> 
 

 

 
    <div id="main-pane"> 
 
    <div id="page-module-containers"> 
 

 
     <div id="container-1"> 
 
     <div class="side-info-list-fixer"> Fixed right pane content </div> 
 
     </div> 
 

 
     <div id="container-0"> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 

 
</div>

Answer 1

मेरा मानना ​​है कि इस सवाल का जवाब आप देख रहे हैं इस प्रकार है ...

एक तत्व की स्थिति 0,0 के लिए डिफ़ॉल्ट नहीं है। इसकी स्थिति डिफ़ॉल्ट तत्व के सापेक्ष डिफ़ॉल्ट रूप से सेट की गई है, इसके लिए आपके उदाहरण में, "# कंटेनर -1" में पैडिंग-बाएं है: 20px जबकि शेष पैडिंग 0 पर सेट है तत्व की "डिफ़ॉल्ट" स्थिति # कंटेनर -1 की दीवार के 20px बाएं और शीर्ष # कंटेनर -1 के शीर्ष से 0px है।

डिफ़ॉल्ट रूप से इस तत्व की डिफ़ॉल्ट स्थिति और स्क्रॉल नहीं किया गया मेरा व्यूपोर्ट शीर्ष से 63px होगा और बाएं स्पष्ट रूप से आपके ब्राउज़र की चौड़ाई पर निर्भर है। हालांकि, यदि आप ऊपर और बाएं ओवरराइड नहीं करते हैं, तो वे पहले से ही रेंडरिंग इंजन द्वारा शीर्ष पर परिभाषित किए गए हैं: 63px, left: 893px।

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

तो, बस "स्थिति: निश्चित" जोड़कर बिल्कुल तय:

position:fixed; 
top:63px; // defined by default during browser rendering in some browsers (based on scroll position on load) 
left:893px; // defined by default during browser rendering in some browsers (based on scroll position/width of browser at time of load) 

इसके अलावा, IE6 और पसंद, स्थिति का समर्थन नहीं करते: अपने गुण (जहां तक ​​ब्राउज़र का संबंध है) के रूप में हो सकता है होगा। http://fiddle.jshell.net/uaE4g/4/show/

मुझे आशा है कि इससे मदद मिलती है!

Answer 2

मैं सफारी 5 में इसी तरह के परिणाम दिखाई दे रही है, और नहीं सफारी में 6.

ब्राउज़रों में

, तो वह ऐसा काम करने के लिए लगता है:

अगर स्थिति के गुणों में से एक एक निश्चित पर परिभाषित नहीं है तत्व, उस संपत्ति का प्रारंभिक मूल्य वही है जैसा कि ऑब्जेक्ट स्थिर था। ऐसा लगता है। पृष्ठ लोड के बाद

, यह व्यवहार करता रहता है जैसे कि यह स्थैतिक था। इसलिए यदि मैं लंबवत तत्व को ठीक करता हूं, लेकिन क्षैतिज रूप से नहीं, तो मैं ऊपर और नीचे स्क्रॉल कर सकता हूं और तत्व स्थिर रहता है, लेकिन यदि मैं किनारे पर स्क्रॉल करता हूं तो तत्व पृष्ठ के साथ स्क्रॉल करते हैं।

लेकिन सफारी 5 में, यदि तत्व एक कंटेनर के भीतर है जिसमें स्थिति है, तो ऐसा लगता है कि आप वर्णन करते हैं: प्रारंभिक मान वैसा ही है जैसा कि यह स्थैतिक था, लेकिन बाद में यह उस स्थिति पर तय रहता है।

आपकी 'साइड-इन्फो-सूची-फ़िक्सर' 'मुख्य-फलक' के भीतर है, जिसमें स्थिति है: रिश्तेदार। इसे बंद करें और आप सफारी 6 और अधिकांश अन्य ब्राउज़रों में वही व्यवहार देख सकते हैं।

मुझे नहीं क्या सही जानते हैं और आप इन सुविधाओं पर निर्भर होना चाहिए मौसम ...

$ 2c, * -pike

Answer 3

मैं एक ही आवश्यकता थी, एक तत्व fixed यह स्वाभाविक है पर स्थित करने के लिए (डिफ़ॉल्ट) व्यूपोर्ट के संबंध में static स्थिति। मैं इस सरल jQuery फ़ंक्शन का उपयोग कर समाप्त हुआ।

function SetFixedPositioning(element) { 
    var currentOffset = $(element).offset(); 
    $(element).css("position", "fixed"); 
    $(element).offset(currentOffset);   
} 

इस तरह यह प्रयोग करें:

SetFixedPosition($("#element-to-position")); 

मेरे उपयोग के मामले में, एक दूसरे स्तर नेविगेशन मेनू है कि दस्तावेज़ में प्रवाहित होती थी तो उस स्थिति में तय हुई थी।