أثناء عملية تصميم صفحات HTML، غالبًا ما نواجه مشكلات ناتجة عن عناصر النموذج التي تغطي عناصر النمط، ويعتبر الشكل 1 مثالًا نموذجيًا. لا تقلل من شأن هذه المشكلة التي تبدو "منخفضة المستوى" فهي ليست شائعة حتى في بعض مواقع الويب الكبيرة. يستكشف هذا المقال السبب الجذري لهذه المشكلة ويقترح علاجًا - السبب الذي يجعلني أقول علاجًا وليس حلًا دائمًا هو أن العملاقين Microsoft وNetScape ليس لديهما إجراءات مضادة حتى الآن.
1. عرض أولوية عناصر HTML
تشتمل عناصر النموذج شائعة الاستخدام في HTML على: منطقة النص (TEXTAREA)، ومربع القائمة (SELECT)، ومربع إدخال النص (نوع INPUT = نص)، ومربع إدخال كلمة المرور (نوع INPUT = كلمة المرور)، ومربع إدخال الراديو (نوع INPUT = راديو)، حدد مربع الإدخال (نوع الإدخال = خانة الاختيار)، وما إلى ذلك. تتضمن العناصر غير النموذجية الشائعة: علامة الارتباط (A)، وعلامة DIV، وعلامة SPAN، وعلامة TABLE، وما إلى ذلك. السبب الأساسي وراء تجاوز عناصر النموذج لعناصر النمط يكمن في قواعد أولوية العرض الافتراضية لعناصر HTML، على سبيل المثال: تكون لعناصر الإطار الأسبقية دائمًا على عناصر HTML الأخرى، وبالتالي يتم عرضها دائمًا في المقدمة، وتكون لها الأسبقية دائمًا على جميع العناصر الأخرى. عناصر النموذج.
يمكن تقسيم كل عناصر HTML هذه إلى فئتين وفقًا لمتطلبات العرض الخاصة بها، وهي العناصر ذات النوافذ والعناصر التي لا تحتوي على نوافذ. تتضمن العناصر ذات الإطارات: عناصر SELECT، وعناصر OBJECT، والمكونات الإضافية، وعناصر IFRAME في IE 5.01 والإصدارات السابقة. تتضمن العناصر التي لا تحتوي على نوافذ: معظم عناصر HTML العادية مثل الروابط وعلامات TABLE، ومعظم عناصر النموذج باستثناء عناصر SELECT، وعناصر IFRAME في NS6+/IE 5.5 والإصدارات الأحدث. تتعلق المشكلات التي تمت مناقشتها في هذه المقالة بشكل أساسي بعناصر HTML التي لها إطارات. ويكمن جوهر المشكلة في أن نظام التشغيل يعرض دائمًا العناصر التي لها إطارات أمام العناصر التي لا تحتوي على إطارات بشكل افتراضي.
2. نوع المتصفح وأولوية العرض
وفقًا لنوع المتصفح، يختلف أيضًا ترتيب عرض عناصر HTML، والذي يتم تلخيصه على النحو التالي:
⑴نتسكيب/موزيلا
في الإصدارات السابقة لمتصفح NS 6.0، كانت عناصر النموذج دائمًا ذات أولوية أعلى من عناصر HTML الأخرى. ولكن في متصفح NS 6+، يتم تحديد ترتيب عرض عناصر IFRAME وجميع عناصر النموذج إما بقيمة سمة z-index في CSS، أو حسب الترتيب الذي تظهر به في صفحة HTML، باستثناء SELECT عنصر.
⑵إنترنت إكسبلورر
في أحدث متصفح IE (6.0)، يحدد عنصر IFRAME وجميع عناصر النموذج أولوية العرض بناءً على قيمة سمة z-index أو الترتيب الذي تظهر به في صفحة HTML، باستثناء عنصر SELECT.
⑶ الأوبرا
في أحدث متصفحات Opera (7.10*)، يتم تحديد أولوية عرض جميع عناصر النموذج، بما في ذلك SELECT، استنادًا إلى سمة z-index أو الترتيب الذي تظهر به في صفحة HTML. ومع ذلك، لا يعرض متصفح Opera الأحدث IFRAME كعنصر بدون نوافذ. ويعتبر IFRAME عنصرًا له إطارات ويحظى بالأولوية على كافة العناصر التي لا تحتوي على نوافذ في ترتيب العرض.
3. سمة CSS z-index
نحن نعلم أنه يمكن استخدام سمة z-index في CSS للتحكم في ترتيب التراكب لأي عنصر HTML عند عرضه. عندما تتداخل عناصر HTML متعددة في نفس المساحة، فإن العنصر ذو قيمة فهرس z الأكبر سيحل محل العنصر بقيمة فهرس z أصغر.
لكن قيمة سمة z-index ليست كلية القدرة. كما ذكرنا من قبل، يتم دائمًا عرض العناصر ذات النوافذ أمام العناصر التي لا تحتوي على نوافذ، وتلعب قيمة السمة z-index دورًا حاسمًا فقط بين العناصر من نفس النوع. وبعبارة مجازية، تشبه العناصر ذات النوافذ والعناصر التي لا تحتوي على نوافذ الرسم على لوحتين مختلفتين في نفس نافذة المتصفح. نوعان من العناصر مستقلان بذاتهما، وسمات مؤشر z الخاصة بهما مرتبطة فقط بالعناصر الأخرى الموجودة على نفس اللوحة. ركلة في.
4. علاج
فيما يتعلق بالمتصفحات الحالية، فإن العلاج الأكثر فعالية هو: عندما يلزم تغطية عنصر بدون نوافذ بعنصر نافذة، استخدم برنامجًا نصيًا لإخفاء عنصر النافذة ديناميكيًا. إليك مثال كامل:
<html><الرأس>
<نوع النمط=نص/css>
.menuBlock{position:relative;top:14px;width:165px;border:2px أسود خالص;}
#subMenus{position:relative;left:15px;top:15px;width:171px;
الحشو على اليسار: 2 بكسل؛ الحشو على اليمين: 2 بكسل؛ الحدود: 2 بكسل أسود خالص؛
مؤشر z:100;الرؤية:مخفي;}
#lb_1{الموضع:مطلق;يسار:10px;أعلى:40px }
</نمط>
<نوع البرنامج النصي=نص/جافا سكريبت>
var isActive = false;
وظيفة شومينو () {
isActive = true;
//document.getElementById(lb_1).style.visibility=hidden;
document.getElementById(subMenus).style.visibility=visible;
}
وظيفة إخفاء القائمة () {
isActive = false;
setTimeout('hide()',100);
}
إخفاء الوظيفة (){
إذا (! نشط) {
document.getElementById(subMenus).style.visibility = Hidden;
document.getElementById(lb_1).style.visibility=visible;
}
}
وظيفة setStyle(menuItem){
isActive = true;
MenuItem.style.backgroundColor = Gray;
MenuItem.style.color = #FFFFFF
}
وظيفة setDefault(menuItem){
isActive = false;
MenuItem.style.backgroundColor = ;
MenuItem.style.color =
HideMenu();
}
</script></head><body>
<div id=main style=position:absolute;width:200px;>
<div id=menuBlock class=menuBlock onmouseover=showMenu();
onmouseout=hideMenu();>قائمة CSS</div>
<div معرف=القوائم الفرعية>
<div معرف=0 onmouseover=setStyle(this)
onmouseout=setDefault(this) >عنصر القائمة الأول</div>
<!--إجمالي أربعة عناصر في القائمة-->
</div><P>
<حدد المعرف=lb_1 الاسم=lb_1>
<قيمة الخيار=-1/>حدد القائمة
<!--ثلاثة خيارات-->
</حدد>
</div>
</body></html>
يحدد الجزء <STYLE> من الصفحة ثلاثة أنماط، تُستخدم لأشرطة القوائم وعناصر القائمة وقوائم التحديد. ويضمن تعريف النمط تداخل مناطق عرض القوائم وقوائم التحديد. يحتوي القسم <BODY> على تعريفات للقوائم وقوائم الاختيار <SELECT>. عندما يمر الماوس فوق شريط القائمة، يتم تنفيذ وظيفة JavaScript showMenu لعرض القائمة وإخفاء قائمة التحديد SELECT. بعد مغادرة الماوس، تقوم وظيفة إخفاء Mnu بإخفاء القائمة واستعادة قائمة التحديد. تُستخدم وظائف JavaScript المتبقية بشكل أساسي لمحاكاة إجراءات القائمة. عندما يمرر الماوس فوق عنصر قائمة، يتم عرض القائمة بدرجة سطوع عالية (وظيفة setStyle)، وعندما يغادر الماوس عنصر القائمة، يتم استعادته إلى وضع العرض الافتراضي. (ضبط الوظيفة الافتراضية). يظهر تأثير تشغيل الصفحة في الشكل 2. قم بالتعليق على العبارة document.getElementById(lb_1).style.visibility=hidden في وظيفة showMenu لرؤية التأثير في الشكل 1.
<وصف>
<img src=http://www.chinahtml.com/cce/img/553/04601t02.jpg>
</وصف>
باختصار، السبب الجذري لتجاوز عناصر النموذج لعناصر النمط يكمن في قواعد أولوية العرض الافتراضية لعناصر HTML. تعتبر العلاجات المقدمة في هذه المقالة فعالة بالفعل، ولكن إذا كنت لا ترغب حقًا في استخدام هذه الطريقة، فعليك التفكير في تغيير تخطيط الصفحة لتجنب تداخل منطقة العرض لعناصر النموذج وعناصر النمط.