Z فهرس لا تتصرف كما أتوقع

Question

لذلك لدي هذا، تقريبا:

<div id="A">
    <ul>
        <li id="B">foo</li>
    </ul>
</div>
<div id="C">
    ...
</div>

يتم وضعها بحيث تتداخل B و C.

لديه أ z-index من 90, ، ب لديه z-index من 92, ، و c لديه z-index من 91. وبعد لكن C يظهر أمام B. ماذا أفعل الخطأ؟ (اسمحوا لي أن أعرف إذا كان مزيد من التفاصيل ضرورية.)

Answer 1

استخدام z-index هو فقط ذات الصلة للعناصر في نفس الحاوية. نظرا لأن B الوارد داخل A، فإن مؤشر Z في B سيتقدم فقط عند حل العناصر الأخرى داخل A. فيما يتعلق C، يتم تقديم كل من B و A في Z-Index 90. ومع ذلك، إذا تم وضع C داخل A، ثم B سوف تجعل في الجبهة.

Answer 2

إذا كان عنصر لا يوجد لديه موقف: قريب / الموقف: المطلق / الموقف: نمط ثابت، إنه موقف: ثابت وهو نمط المرمى الافتراضي لجميع العناصر.

مع عنصر هو موقف: ثابت، Z-Index ببساطة لا يعمل. سيقوم المتصفح بتقديم المكدس في ترتيب عنصر XML وتجاهل الخاصية Z-Index.

للحصول على موقف مثل هذا للعمل، يجب عليك إضافة موقف: بالنسبة لجميع العناصر الثلاثة، A، B، C.

لفهم المزيد عن Z-Index و CSS التراص، توجه إلى هنا: http://www.tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp.