هل من الممكن z-فهرس DIV متداخلة أعلى (عرض "أعلاه") ثم فحم الجذر في IE7؟

StackOverflow https://stackoverflow.com/questions/910349

  •  05-09-2019
  •  | 
  •  

سؤال

تحديث!!!

الإجابة المقترحة غير صحيحة، خطأي. #Container div يجب أن "تعويم: اليسار؛". يرجى التحقق من HTML في Firefox و IE7. يمكنك ان ترى الفرق!

لا أستطيع أن أحصل على DIV متداخلا لعرضها أعلى من الحملة المتداخلة بشكل هرمي باستخدام z-Index ... يتماشى التراكب الاستلقاء على الدف السفلي المتداخن على الرغم من أن الدف السفلي المتداخلي لديه مؤشر Z أعلى ... هل هذا حتى ممكن في IE7؟

يعرض ما يلي #Details الأزرق فوق اللون الأخضر #overlay في فايرفوكس، ولكن في IE7 الأزرق الأزرق هو أسفل الأخضر #overlay

تحديث 2:الثمن: إضافة "z-visuch: 99؛" إلى نمط #Container يجعل الفصل. فئة divs تظهر (في فايرفوكس، أي افسدت: على أي حال لا يتم عرض كلاهما بشكل صحيح)، في حين يجب أن تكون تحت التراكب! بدون تعيين #container Z-Index، فإنه يعرض بشكل صحيح في Firefox، ولكن ليس أي ....

<html>
    <body>
        <style type="text/css">
            .item {
                float:left;width:75px;height:75px;background-color:red;
            }
        </style>
        <div id="main" style="position:relative;">
            <!-- this one should overlay everything, except #details -->
            <div id="overlay" style="position:absolute;
                                     top:0px;
                                     left:0px;
                                     width:500px;
                                     height:500px;
                                     z-index:1;
                                     background-color:green;"></div>
            <div id="container" style="position:relative;float:left;">
                <!-- these ones should display UNDER the overlay: so NOT visible -->
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <!-- this one should display above the overlay -->
                <div id="details" style="position:absolute;
                                         width:200px;
                                         height:200px;
                                         background-color:blue;
                                         left:400px;
                                         z-index:99;"></div>
            </div>
        </div>
    </body>
</html>
هل كانت مفيدة؟

المحلول

أعتقد أنك يجب أن تزيد من مؤشر Z من #Container للحصول على هذا العمل في IE7.

نص Alt http://img529.imageshack.us/img529/6416/24042958.jpg.

نصائح أخرى

لا أعتقد أن IE7 سوف يتيح لك القيام بذلك ما لم تتمكن من تغيير علامتك.

#Container لا يجلس وراء #OVERLAY حتى يتم إعطاء موقف مطلق وإذا قمت بتغيير مؤشر Z من #container إلى -1، فإن طفلك #Details يذهب وراء ذلك.

التغيير .Items Z-Index إلى -1 لن يعمل أيضا.

إذا لم يكن من الممكن أن تتحرك #Details خارج #container؟ لا أستطيع أن أقترح بديلا دون أن أرى بالضبط ما تحاول تحقيقه كنتيجة نهائية وما هي السيطرة التي لديك، إن وجدت؟

على سبيل المثال ما هي النقطة في التراكب؟ هل ستكون حمالة شفافة قليلا أو صلبة؟ ألا تريد إخفاء .ITEMS إذا لن يكون المستخدم قادرا على رؤيتهم وراء التراكب؟

هل لديك حق الوصول إلى أي مكتبات JavaScript مثل JQuery .. لتكون قادرا على التحرك #Details إلى موقع مختلف في DOM؟

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top