2013-06-13 4 views
6

"बिल्कुल स्थित स्थान तत्व निकटतम स्थित पूर्वजों के सापेक्ष स्थित है।" - MDN: position - CSSतब निकटतम स्थित पूर्वजों को बाईपास करना संभव है?

मैं इस समझा जब वहाँ एक माता पिता कौन position:relative; के रूप में परिभाषित किया गया था लेकिन क्या मुझे नहीं पता था कि position:absolute तकनीकी रूप से एक "तैनात पूर्वज" के रूप में योग्य था। http://jsfiddle.net/MSzZG/ यह अच्छा होगा अगर पाठ "शीर्ष पर" top संपत्ति हो सकता था होता युक्त div के बजाय खिड़की पर लागू होते हैं, लेकिन मैं तो बस को समझ नहीं सकता है अगर यह बायपास करने के लिए संभव है:

यहां एक नमूना है।

<div> 
<div>Content 
</div> 
</div> 
<div style="position:absolute;"> 
<div style="position:absolute;top:0px;">At top 
</div> 
</div> 

वहाँ ( बिना तय का प्रयोग करके) एक पहले से तैनात निरपेक्ष तत्व बायपास करने के लिए कोई तरीका है? एक जावास्क्रिप्ट समाधान स्वीकार्य है।

+0

क्या आपने 'निश्चित 'की कोशिश की है? यह हमेशा विंडो का संदर्भ देगा ... – Pevara

+0

@ पीटर वीआर - मुझे एहसास है, लेकिन खिड़की स्क्रॉल होने पर निश्चित रूप से स्थिर रहता है जो मुद्दों का कारण बन सकता है। –

+0

आप 'फ्लोट' का उपयोग कर सकते हैं। उदाहरण: http://jsfiddle.net/MSzZG/1/ –

उत्तर

2

आपको अपनी प्राकृतिक स्थिति और खिड़की में पूरी तरह से रखने की वांछित स्थिति के बीच अंतर की गणना करनी होगी।

यदि आप jQuery का उपयोग कर रहे हैं, तो आप .offset(coordinates) फ़ंक्शन के माध्यम से इसे गणित करने दे सकते हैं।

1

यदि आप आंतरिक position: absolute div विंडो के सापेक्ष स्थित होने के लिए चाहते हैं (जिसे आपको position: relative निर्दिष्ट करना चाहिए) तो आपको इसे घोंसला नहीं करना चाहिए।

position: absolute हमेशा अपने सबसे तत्काल स्थित माता-पिता (position: absolute या position: relative के साथ) के सापेक्ष स्थित होगा। आप इसे बाईपास नहीं कर सकते - आपको बस अपने एचटीएमएल को बेहतर तरीके से व्यवस्थित करना होगा या सीएसएस को अलग-अलग कार्यान्वित करना होगा।

तो मूल रूप से अपने प्रश्न का उत्तर कम से कम नहीं तय स्थिति आपके द्वारा विशेष करना चाहते नहीं उल्लेख का उपयोग किए बिना कोई :(है।

2

उत्तर

नहीं, आप ऐसा नहीं कर सकते।

तर्क

आप तो आप एक स्थिति सकता है कि माता पिता से पूरी तरह से दूर। यह केवल "अकेला" जनक नहीं होगा div लेकिन यह भी पूरी तरह से घोंसले। नेस्टिंग div टैग के प्रयोजनों को हराने करने में सक्षम थे, तो याउस मामले के लिए कोई भी टैग कॉस्मेटिक उद्देश्यों के लिए नहीं किया गया है; यह पाठक को उपयोगकर्ता के लिए व्यक्त करने के लिए किया जाता है।

क्या मैं आपके दृष्टिकोण पर पुनर्विचार करने का सुझाव दे सकता हूं? शायद यदि आप समझाते हैं कि आप अंतिम परिणाम बनना चाहते हैं, तो हम आपकी मदद कर सकते हैं। निश्चित रूप से एक समाधान होना चाहिए।

संभव समाधान

  • आप की जरूरत भीतरी div शीर्ष पर तैनात किया जाना है तो यह एक स्तर बाहर ले।
  • अभिभावक से पूर्ण स्थिति को हटा दें।
  • पूर्ण के अलावा अन्य स्थिति की एक और विधि का उपयोग करना।
संबंधित मुद्दे