पूर्ण पदों के साथ स्क्रॉल और सामग्री के साथ Div

Question

मेरे पास शैली के साथ "div" है: overflow-y: scroll; overflow-x: auto; मैं गतिशीलता को पूर्ण या सापेक्ष स्थिति के साथ इस "div" के अंदर छवि जोड़ने की कोशिश करता हूं। जब तक उपयोगकर्ता "div" सामग्री को स्क्रॉल करने का प्रयास नहीं करता तब तक सब कुछ ठीक लगता है: छवि ब्राउज़र विंडो के सापेक्ष निश्चित स्थिति में रहता है। यह समस्या केवल आईई (7) में है, फ़ायरफ़ॉक्स में सबकुछ ठीक है। क्या इसके लिए कोई समाधान है?

संपादित करें (नीचे उठाए गए प्रश्नों के जवाब में): मैं तत्व को स्थिति में रख रहा हूं क्योंकि मुझे इसे किसी अन्य तत्व के सामने दिखाने की आवश्यकता है।

Answer 1

क्या कोई विशेष कारण है कि आपको छवि के लिए स्थिति निर्धारित करने की आवश्यकता है? यह स्थिति स्थापित किए बिना आईई 7 में ठीक काम करता है।

<div style="overflow-x:auto; overflow-y:scroll; width:200px; height:200px;"><img src=xxx.gif" width="200" height="250" /></div> 

Answer 2

मुझे नहीं पता कि यह आईई में एक बग या "फीचर" है, लेकिन मैं पहले एक ही चीज़ में चला गया हूं। सौभाग्य से एक आसान फिक्स है। बस <div> पर "position:relative" जोड़ें जिसमें स्क्रॉल करने योग्य सामग्री है।

Answer 3

घोषणा position: absolute; का अर्थ है कि तत्व दृश्य-पोर्ट के ऊपरी बाएं कोने के सापेक्ष प्रदर्शित किया जाएगा। relative का उपयोग करने का अर्थ है कि left और top के लिए उपयोग किए जाने वाले मानों को सामान्य रूप से img पर जोड़ा जाएगा।

Answer 4

यदि आप स्क्रॉल करने में सक्षम होना चाहते हैं तो आपको रिश्तेदार स्थिति का उपयोग करने की आवश्यकता है। चाल दूसरे तत्व पर नकारात्मक स्थिति का उपयोग करना है।

मान लीजिए कि आप दो तत्वों ए और बी है, और आप ए के सामने बी स्थिति यह कुछ इस तरह दिखेगा चाहते हैं:

<div id="A" style="position:relative; width:300px; height=240px;">Element A</div> 

<div id="B" style="position:relative; width:300px; height=240px; top:-240px;">Element B</div> 

सामग्री पर निर्भर करता है, आप अतिरिक्त जोड़ने के लिए हो सकता है शैलियों जैसे "प्रदर्शन: ब्लॉक;" आदि इन के लिए एक अच्छा संसाधन सीएसएस के साथ DIV स्थिति पर एक अच्छा ट्यूटोरियल के लिए w3schools.com

है पर जाएँ:

http://www.barelyfitz.com/screencast/html-training/css/positioning/

चीयर्स

Answer 5

तुम्हें पता है क्या, यह सिर्फ आसान हो सकता है एक अपेक्षाकृत तैनात कंटेनर तत्व में पूर्ण स्थानित तत्वों को लपेटने के लिए, मुझे लगता है कि स्क्रॉल करने में सक्षम होना चाहिए ...

Answer 6

पृष्ठ पर अपेक्षाकृत एक युक्त div में सबकुछ लपेटें:

<div style="display:block; position:relative; width:200px; height:200px; margin:0; padding:0;"> 
    <br /> 
    <img src="_foo_.gif" style="position:absolute; top:0; left:0; z-index:100;" /> 
    <br /> 
    <div style="overflow-x:auto; overflow-y:scroll; width:200px; height:200px; z-index:10; display:block; position:relative;"> 
     <br />[scrolling content]<br /> 
    </div> 
    <br /> 
</div> 

Answer 7

चीजें मैं मुश्किल तरीके से सीखा है: यह स्क्रॉल DIV से अधिक पर प्रकट करने के लिए युक्त DIV में पिछले डोम तत्व के रूप में छवि है की आवश्यकता हो सकती IE6/IE7 के लिए।

Answer 8

कोशिश float:left या float:rightmargin

साथ मैं एक overflow-y: auto; में position:absolute साथ क्रोम में एक ही मुद्दा मिल गया। स्क्रॉल करते समय divs वहां स्थितियों में तय हो रहे थे।

और एक साधारण समाधान फ्लोट का उपयोग कर रहा है।

मेरे पुराने कोड था-

position:absolute; right:10px; 

और मैं निम्नलिखित के साथ बदल दिया है और यह

float:right; margin-right:10px;