javascript google Div مع التمرير والمحتوى مع المواضع المطلقة



html5shiv-html5 ie enabling script-google project hosting (7)

أنت تعرف ما ، قد يكون من الأسهل لفك العناصر المطلقة في وضعية الحاوية المتمركزة نسبيًا ، أعتقد أنه يجب أن يكون قادرا على التمرير ...

لدي "div" بأسلوب: overflow-y: scroll; overflow-x: auto; overflow-y: scroll; overflow-x: auto; أحاول ديناميكيالي إضافة صورة داخل هذا "div" مع موقف مطلق أو نسبي. يبدو أن كل شيء على ما يرام حتى يحاول المستخدم تمرير محتوى "div": تبقى الصورة في موضع ثابت بالنسبة إلى نافذة المتصفح. يبدو أن هذه المشكلة فقط في IE (7) ، في فايرفوكس كل شيء على ما يرام. هل هناك أي حلول لهذا؟

EDIT (ردًا على الأسئلة المثارة أدناه): أضع العنصر لأني أحتاج إليه ليظهر أمام عنصر آخر.


Answer #1

لف كل شيء في 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 #2

الأشياء التي تعلمتها بالطريقة الصعبة: بالنسبة لـ IE6 / IE7 فقد تحتاج إلى أن تكون الصورة كعنصر DOM آخر في عنصر DIV الذي يحتوي على ظهوره على DIV.


Answer #3

تحتاج إلى استخدام موضع نسبي إذا كنت تريد تمكينه من التمرير. الحيلة هي استخدام المواقع السلبية على العنصر الثاني.

لنفترض أن لديك عنصرين "أ" و "ب" ، وتريد وضع "ب" أمام "أ". سيبدو الأمر كالتالي:

<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>

اعتمادًا على المحتوى ، قد تضطر إلى إضافة أنماط إضافية مثل "display: block؛" مورد جيد لهذه هي w3schools.com

للحصول على برنامج تعليمي جيد حول وضع DIV مع CSS ، انتقل إلى:

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

في صحتك


Answer #4

لا أعرف ما إذا كان خطأ أو "ميزة" في IE ، لكنني واجهت نفس الشيء من قبل. لحسن الحظ هناك حل سهل. ما عليك سوى إضافة " position:relative " إلى <div> التي تحتوي على محتويات قابلة للتمرير.


Answer #5

هل هناك سبب معين يلزمك تعيين موضع للصورة؟ يعمل بشكل جيد في IE7 بدون تحديد موضع.

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

Answer #6

position: absolute; الإعلان position: absolute; يعني أنه سيتم عرض العنصر بالنسبة للركن الأيسر العلوي لمنفذ العرض. استخدام relative بدلاً من ذلك يعني أن القيم التي تستخدمها left top ستتم إضافتها إلى أي مكان كان يمكن أن يكون img عادة.





internet-explorer