خمس قواعد للتراكب

الكاتب：Eve Cole وقت التحديث：2009-06-12 17:53:18

[المتصفحات المشاركة في الاختبار: IE6/IE7/IE8/FF3/OP9.6/SF3/Chrome2]
[نظام التشغيل: Windows]

يبدو أن العديد من الطلاب مهووسون بمشكلة سبب وجود div هذا في الطبقة العليا ووجود div في الطبقة السفلية، وبغض النظر عن كيفية تعيين مؤشر z، فلن يتمكنوا من الحصول عليه إنهم يعانون من القيء والإسهال والغثيان والأرق، وينتهي بهم الأمر بالاكتئاب. إلا أن تأثير تراكب الطبقات يظهر بشكل متكرر في تصميم التفاعل، لذا يجب علينا السيطرة عليه، وللتحكم فيه يجب أن نتقن قوانينه.

أولاً، قم بتوضيح بعض المفاهيم التي يجب استخدامها في هذه المقالة :

الموضع الثابت: الموضع: ثابت (القيمة الافتراضية لسمة الموضع).
تحديد المواقع الديناميكي: الموضع: نسبي أو الموضع: مطلق أو الموضع: ثابت.
عنصر السلف: أي عنصر يحتوي على هذا العنصر.
العنصر الأصل: العنصر الأصل الذي يحتوي على هذا العنصر مباشرة.
العناصر الشقيقة: العناصر التي تشترك في عنصر أصل مشترك.

ملاحظة: تم تخصيص هذه المفاهيم بواسطة المؤلف ويتم استخدامها في هذه المقالة فقط.

اقتباس:

عنصر النظير هو كلمة أساسية للغاية ويجب شرحها بالتفصيل هنا.

<ديف>
<ديف></ديف>
<div معرف = "a"></div>
<ديف></ديف>
<ديف></ديف>
<ديف></ديف>
<ديف></ديف>
</div>
<div معرف = "f">
<ديف></ديف>
<div معرف = "ب"></div>
<div معرف = "ج"></div>
<ديف></ديف>
<ديف></ديف>
<ديف></ديف>
</div>

في هذا المثال، div#a وdiv#b ليسا "عناصر شقيقة". فقط العناصر مثل div#b وdiv#c التي لها نفس الأصل div#f يمكن أن تسمى "عناصر شقيقة".

نهاية

الاقتباس

دعونا نلقي نظرة على هذه القواعد الخمس :

القاعدة 1: عندما يتم وضع العناصر الشقيقة بنفس الطريقة ولا يوجد إعداد z-index، سيتم وضع html فوق الأخير.

القاعدة 2: عندما يتم وضع العناصر الشقيقة ديناميكيًا ولها إعدادات فهرس z، فإن العنصر ذو قيمة فهرس z الأكبر سيأتي أولاً.

القاعدة 3: عندما يتم وضع العناصر الشقيقة بطرق مختلفة، ضعها ديناميكيًا في الأعلى.

القاعدة 4: عندما لا يكون لدى العناصر غير الشقيقة، أي منها وعنصر أسلافها تخطيط ديناميكي، فستكون الأولوية لـ html.

القاعدة 5 : [مهم] عندما يكون لأي عنصر من العناصر غير الشقيقة أو عنصر سلفه موضع ديناميكي، ابحث لأعلى عن عنصر السلف المتوضع ديناميكيًا في نفس الوقت، واستخرج عنصر السلف ذو المستوى الأعلى (أو نفسه) لـ مقارنة. .

الحالة 1: بغض النظر عن حجم الفهرس z للعنصر الفرعي، فإن العنصر الأصلي الأكبر سيأتي أولاً.

الحالة 2: يتم وضع العنصر الأصلي في الأسفل، ويمكن أيضًا وضع العنصر الفرعي في الأعلى.

يتم دمج الحالة 1 والحالة 2 مع المقارنة الموسعة.

تشغيل مربع التعليمات البرمجية
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http ://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="Chomo" /> <link rel="start" href="http://www.14px.com" title="الصفحة الرئيسية" /> <title>القاعدة 5: العناصر غير الشقيقة، أي واحد أو سلفه عندما يكون لعنصر ما موضع ديناميكي، فإنه يبحث لأعلى عن عنصر السلف الذي تم وضعه ديناميكيًا، ويستخرج عنصر السلف ذو المستوى الأعلى (أو نفسه) للمقارنة. </title> </head> <style type="text/css"> div { الخط:12px/1.5 arial;} div strong { color:#fff الخلفية:#036;} h3 strong { color:#f00;} /*--- تحديد شكل الكتلة ---*/ .div1, .div2 { height:70px width:150px; border:#cff border:1px Solid #036; .grandDiv1, .grandDiv2 { padding:10px; border:1px Solid #060; #fcf } /*--- تحديد موضع إزاحة المربع وموضع النص---*/ .grandDiv2 { Margin-top:-50px; -left: 85px; } .div2 { Margin-top:-20px; 0;} </style> <body> <h3>القاعدة 5<strong>(مهم)</strong>: عندما يكون لأي عنصر من العناصر غير الشقيقة أو العنصر السلف له موضع ديناميكي، فإن كل واحد منهم سيتطلع إلى ابحث عن عنصر السلف الذي تم وضعه ديناميكيًا في نفس الوقت للانتقال إلى المستوى التالي لعنصر السلف، واستخرج عنصر السلف ذو المستوى الأعلى (أو نفسه) للمقارنة. </h3> <p>الحالة 1: بغض النظر عن حجم الفهرس z للعنصر الفرعي، فإن العنصر الأصلي الأكبر سيأتي أولاً. <p> <div class="parentDiv1" style="position:relative; z-index:2;"> .parentDiv1{position:relative;<strong>z-index:2</strong>} <div class=" div1">.div1{position:static</div> </div> <div class="parentDiv2" style="position:relative z-index:1;"> <div class="div2" style=" Position:relative; 1</strong>} </div> <p>الحالة 2: العنصر الأصلي موجود في الأسفل، ويمكن أن يكون العنصر الفرعي أيضًا في الأعلى. <p> <div class="parentDiv1"> .parentDiv1{position:staitc} <div class="div1" style="position:relative;">.div1{position:relative</div> </div> < div class="parentDiv2"> <div class="div2">.div2{position:staitc}</div> .parentDiv2{position:staitc} </div> <p>الحالة 1 والحالة 2 مدمجة مع المقارنة الموسعة. <p> <div class="grandDiv1" style="position:relative; z-index:3;"> .grandDiv1{position:relative;<strong>z-index:3</strong>} <div class=" parentDiv1"> .parentDiv1{position:staitc} <div class="div1" style="position:relative z-index:10000;">.div1{position:relative;<strong>z-index:10000</strong; ></div> </div> </div> <div class = "grandDiv2"> <div class = "parentDiv2" style = "position:relative; z-index:4;"> <div class = "div2 ">.div2{position:staitc</div> .parentDiv2{position:relative;<strong>z-index:4</strong>} </div> .grandDiv2{position:static;} </div> < /الجسم></html>
[Ctrl+A جميع نصائح التحديد: يمكنك تعديل جزء من الكود أولاً]

اقتباس:

في الواقع، النقاط الأربع الأولى هي الأساسيات، والنقطة الخامسة فقط هي الأكثر صعوبة في الفهم:

في هذا المثال، قمنا بمقارنة العلاقة المتتالية بين div#a_inner5 وdiv#b_inner4.
حتى المستوى التالي من عنصر السلف 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; شعبة # ب_inner3.
ثم أخرج أعلى مستوى للمقارنة: div#a > #div#b_inner3.

عندما يكون العنصر الأصلي في الأسفل، ويمكن أن يكون العنصر الفرعي أيضًا في الأعلى، يتم استخدام العنصر غير الشقيق. عندما يكون للعنصر الأصل تخطيط ديناميكي، فإن مقارنته لا علاقة لها بالموضع: ثابت، ولكن سلفه. يمكن مقارنة العنصر من خلال موضع html.

نهاية الاقتباس

بالطبع، في بعض الأحيان هناك حالات خاصة، مثل الفلاش والتحديد في IE6 لا يمكن تغطيتها، وهي حالات غير طبيعية. يمكنك البحث عن المقالات ذات الصلة بنفسك.