[المتصفحات المشاركة في الاختبار: IE6/IE7/IE8/FF3/OP9.6/SF3/Chrome2] يبدو أن العديد من الطلاب يشعرون بالارتباك حول سبب وجود هذا div في الطابق العلوي وأن Div على المستوى الأدنى. ، مما تسبب لك في عدم استخدام تراكب الطبقات في الإرادة. ومع ذلك ، يظهر تأثير التراكب للطبقات بشكل متكرر في التصميم التفاعلي ، لذلك يجب علينا التحكم فيه. أولاً ، دعنا نوضح بعض المفاهيم التي يجب استخدامها في المقالة : وضع ثابت: الموضع: ثابت (القيمة الافتراضية لخاصية الموضع). تحديد المواقع الديناميكية: الموضع: النسبي أو الموضع: مطلق أو الموضع: ثابت. عنصر الأجداد: أي عنصر يحتوي على العنصر. العنصر الأصل: عنصر الأجداد الذي يحتوي مباشرة على العنصر. عنصر الأقران: عنصر مع عنصر الأصل المشترك. ملاحظة: يتم تخصيص هذه المفاهيم من قبل المؤلف وتستخدم فقط في هذه المقالة. يقتبس: عنصر الأقران هو كلمة حرجة للغاية ، ويجب شرحها بالتفصيل هنا. <viv> في هذا المثال ، فإن Div#A و Div#B ليست "عناصر متزامنة". نهاية الاقتباس دعونا نلقي نظرة على هذه القواعد الخمس : القاعدة 1: عندما تكون طريقة تحديد موقع عناصر الأقران هي نفسها ولا يوجد إعداد z-ondex ، يعتمد HTML على الأخير. قم بتشغيل مربع الرمز القاعدة 2: عندما يتم وضع نفس العناصر ديناميكيًا ، وهناك إعداد z-ondex ، فإن القيمة التي لديها أكبر قيمة Z-Index هي الأعلى. قم بتشغيل مربع الرمز القاعدة 3: طرق تحديد موقع عناصر الأقران مختلفة ، والوضع الديناميكي هو الأولوية القصوى. قم بتشغيل مربع الرمز القاعدة 4: عندما لا يكون للعناصر غير المتاحة في وقت واحد ، فإن أي عناصر أجدادها لا تحتوي على تخطيط ديناميكي ، يعتمد HTML على الأخير. قم بتشغيل مربع الرمز القاعدة 5 : [مهم] عندما يكون لأي من العناصر غير المتاحة تحديد موقع ديناميكي ، سيبحث كل واحد منها عن عناصر الأجداد الديناميكية لأعلى ، وسيأخذ كل واحد منها أعلى مستوى من عناصر الأجداد (أو نفسها) للمقارنة . الحالة 1: بغض النظر عن حجم مؤشر Z للعنصر الطفل ، كلما زاد العنصر الأصل. الحالة 2: العنصر الأصل أقل ، ويمكن أن يكون العنصر الطفل أعلى أيضًا. الحالة 1 ، الحالة 2 جنبا إلى جنب مع المقارنة الموسعة. قم بتشغيل مربع الرمز يقتبس: في الواقع ، فإن النقاط الأربع الأولى كلها أساسية ، ومن الصعب فهم النقطة الخامسة. <div id = "ab" style = "الموضع: مطلق ؛"> في هذا المثال ، دعنا نقارن علاقة تتالي بين Div#A_INNER5 و DIV#B_INNER4. عندما يكون العنصر الأصل أقل ويمكن أيضًا أن يكون العنصر الطفل أعلى ، فذلك لأنه عندما يتم استخدام العنصر غير النقيف لتخطيط عنصر الأسلاف ديناميكيًا ، لا علاقة له بالموضع: ثابت ، ولكن عنصر أسلافه يمكن أن يكون مقارنة من خلال موضع HTML. نهاية الاقتباس بالطبع ، هناك حالات خاصة ، مثل Flash ، واختيار في IE6 والتي لا يمكن حظرها.
[نظام التشغيل: Windows]
<viv> </viv>
<div id = "a"> </viv>
<viv> </viv>
<viv> </viv>
<viv> </viv>
<viv> </viv>
</div>
<div id = "f">
<viv> </viv>
<div id = "b"> </viv>
<div id = "c"> </viv>
<viv> </viv>
<viv> </viv>
<viv> </viv>
</div>
[Ctrl+A جميع نصائح التحديد: يمكنك تعديل بعض الرموز أولاً]
[Ctrl+A جميع نصائح التحديد: يمكنك تعديل بعض الرموز أولاً]
[Ctrl+A جميع نصائح التحديد: يمكنك تعديل بعض الرموز أولاً]
[Ctrl+A جميع نصائح التحديد: يمكنك تعديل بعض الرموز أولاً]
[Ctrl+A جميع نصائح التحديد: يمكنك تعديل بعض الرموز أولاً]
<div id = "a" style = "الموضع: النسبية ؛ z-index: 100 ؛">
<div id = "a_inner1">
<div id = "a_inner2">
<div id = "a_inner3" style = "الموضع: النسبية ؛ z-index: 98 ؛">
<div id = "a_inner4">
<div id = "a_inner5">
</div>
</div>
</div>
</div>
</div>
</div>
<div id = "b">
<div id = "b_inner1">
<div id = "b_inner2">
<div id = "b_inner3" style = "الموضع: النسبية ؛ z-index: 99 ؛">
<div id = "b_inner4">
</div>
</div>
</div>
</div>
</div>
</div>
حتى المستوى التالي من عنصر الأجداد Div#ab ، تشمل عناصر الأجداد من Div#A_Inner5: Div#A ، Div#A_INNER1 ، DIV#A_INNER2 ، DIV#A_INNER3 ، Div#A_INNER4 ؛ Div#B ، Div#B_inner1 ، div#b_inner2 ، div#b_inner3.
ثم تحليل عناصر أجدادهم التي لها وضع ديناميكي: عناصر أجداد Div#A_INNER5 التي تحتوي على وضع ديناميكي هي: Div#A ، Div#A_INNER3 ؛
ثم أخرج أعلى مستوى للمقارنة: div#a>#div#b_inner3.