CSS z-index: نظرة عامة ، خصائص

قاعدة CSS - فهرس z - موقع عنصر الصفحةZ coordinate: مستوى عرض العنصر أو الطبقة التي يقع فيها. سيتم عرض علامة بمؤشر z أكثر بالكامل. يتم عرض العلامات بالترتيب الذي تظهر به في الدفق الوارد وتتداخل مع بعضها البعض. تحدد قيمة z-index رؤية الأولوية.

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

القاعدة العامة: النظام والمستوى

تتم قراءة دفق الإدخال (الصفحة التي تم إنشاؤها بواسطة الخادم) بواسطة المستعرض بالتسلسل. يتم عرض جميع العلامات وفقًا لقواعد CSS ويمكن أن تتداخل مع بعضها البعض.

يصف هذا المثال أربعة عناصر مرئية. كل التالي يتداخل مع السابق. في الأماكن التي تتقاطع فيها العلامات ، تنشأ مسألة الأولوية. ونظرًا لأن قاعدة CSS لـ z-index لجميع هذه العلامات هي نفسها وتساوي 848 ، فإن العنصر التالي سيكون مرئيًا. كل ما يبدو من تحت كل عنصر من العناصر التالية ، على ما يبدو.

قاعدة الرؤية

تتوافق المتصفحات مع قاعدة الرؤيةاستثنائية "صادقة". من أجل التوصل إلى خوارزمية يمكنك بواسطتها تحليل جميع التراكبات بالجملة وتطبيق فقط تلك التي تتقاطع حقًا دون الأخذ بعين الاعتبار تلك المناطق التي يمتصها كل عنصر تالٍ - إنه أمر صعب للغاية.

في معظم الحالات ، هذا ليس ضروريا. تعمل المعدات الحديثة بسرعة كبيرة ، ومن الصعوبة بمكان ملاحظة إعادة رسم العنصر حتى يتداخل العنصر التالي معه.

تأثير على تسلسل العناصر

يكفي للعلامة الثالثة scCSS3 لزيادة قيمة z-index ، ولـ scCSS4 - لتقليلها مع تغير الصورة العامة. في هذه الحالة ، يظل تسلسل العناصر التالية في مجموعة البث كما هو:

• شعبة معرف ="ScCSS1".
• شعبة معرف ="ScCSS2".
• شعبة معرف ="ScCSS3".
• شعبة معرف ="ScCSS4".

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

يتم تسليط الضوء على الأحجام الحقيقية للمناطق التي تشغلها الصور الثانية والثالثة باللون الأصفر والرمادي ، على التوالي.

الجمع بين مؤشر z مع لون الخلفية

يرجى ملاحظة أن خصائص CSSالخلفية ومؤشر ض يكمل كل منهما الآخر. جميع عناصر الكتلة ، وأي عنصر آخر ، تحتل دائمًا مساحة مستطيلة تتكون من أقصى ارتفاع وعرض أقصى للمحتوى.

باستخدام الصور ، يمكنك إعطاء أي شكل لمنطقة العنصر ، ولكن سيكون هناك دائمًا مستطيل حوله. هذه هي حقيقة مهمة للنظر بشكل صحيح.

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

باستخدام خاصية CSS فهرس z على عنصرالتي لون الخلفية شفاف (نوع من الشفافية) يسمح لك بمحاكاة أي مخطط تفصيلي للعنصر. على الرغم من أنه في أي حال ، في الواقع ، سيكون العنصر مستطيلاً.

أحداث العنصر والرؤية

في الأماكن التي يتم فيها حظر العنصر بواسطة عنصر آخر ، لن تعمل الأحداث عليه. كقاعدة عامة ، إذا كان العنصر بعيدًا عن الأنظار ، فهو أيضًا بعيد المنال.

إذا أراد المطور تأمين الزر أوعنصر القائمة ، قد يضع علامة أخرى على علامة الحجب ، قد تكون علامة شفافة (على سبيل المثال ، باستخدام قاعدة عتامة CSS) ، ولكن في أي حالة تحتوي على فهرس CSS z أعلى.

منذ الأحداث من نقطة المستخدممن وجهة نظر ، يمكن تقسيمها إلى مغزى وعدم وجود مثل هذه ، ثم يمكن استخدام هذا الأخير (تحريك الماوس ، عن طريق الخطأ الضغط على زر على لوحة المفاتيح ، إشارة الموقت) لتغيير المحتوى بشكل كاف في نافذة المتصفح.

مثال بسيط: قام الزائر بتحريك مؤشر الماوس فوق عنصر القائمة ، ولكنه لم يقرر بعد القيام بأي شيء. يمكن للمطور توفير هذا الحدث ، وتتبع الحركة إلى النقطة المطلوبة في الحوار (انقر - يتخذ الزائر قرارًا) وعرض المحتوى المناسب. تعتبر قاعدة CSS-z مناسبة تمامًا لهذه الحالة.

تنسيق الصورة

لأن الصور مهمةمواد البناء لأي موقع (الجمال ، الحداثة ، الوظيفة - بالفعل القاعدة المعتادة للأشياء) ، اختيار تنسيق الصور له أهمية كبيرة.

على العموم ، يمكنك استخدام كل شيءمجموعة متنوعة من التنسيقات الموجودة ، ولكن من وجهة نظر التطبيق العملي والكفاءة ، فمن المعقول أن نحصر * .png للصور الثابتة و * .gif للصور المتحركة. شعبية * .jpg هي أيضا جيدة ، لكنها لا تسمح المرونة للتلاعب في مساحة العرض.

أخطاء المستعرض والمطوّر

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

ترجمة HTML و CSS ، يكاد يكون المتصفحجعل الأخطاء بديهية. إذا لم يكن هناك عنصر ضروري ، فهذا يعني أنه في بناء CSS {position: absolute؛ z-index: 112233؛ left: 10px؛ العلوي: 20 بكسل ؛ ...} شيء مفقود أو مكتوب بشكل خاطئ.

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

يجب تحديد النمط في نمط الفئة أو المعرف. يجب الإشارة إلى النمط على العنصر فقط في حالات استثنائية.

باستخدام jQuery.يمكن أن يؤدي css (z-index، 123) أيضًا إلى حدوث خطأ إذا تم تطبيقه على الفئة أو المعرف غير الصحيح. بالإضافة إلى ذلك ، jQuery هو أداة تطوير كبيرة حقا. ومع ذلك ، قبل تطبيقه ، لا يؤلمك التفكير: هل من الممكن القيام بالوسائل المرتجعة لـ HTML / CSS ، فإن z-index ليس قاعدة لا تحتاج إلى اهتمام وثيق.

طبقات صحيحة وحركة منطقية

الصفحة المثالية مسطحة. على أي حال ، فهو بعيد كل البعد عن صورة الحجمية الحقيقية على نطاق واسع ، وليس هناك حاجة خاصة لذلك. المواقع الحديثة هي ممارسة حقيقية ، مهام حقيقية. عليهم فقط العمل ، ولكن تلك المسطحة تظهر صورة ثلاثية الأبعاد.

بالمناسبة ، ظاهرة صفحات الهبوط (الهبوطصفحة) في شكل نسخة "بناء موقع" - أفضل تأكيد أن الأشكال المستطيلة المسطحة والمحتوى الجاف ، ولكن واضح للغاية هي أيضا جيدة وعملية. لكن تجدر الإشارة إلى أن مواقع الشركات الاحتكارية بقيت مع: أهم شيء هو وجه الشركة ، وظيفتها وقوتها الإنتاجية. واعتبرت حوش تكنولوجيا المعلومات أن الصفحات المقصودة هي وجه الأعمال التجارية الصغيرة والملحقات و Herbalife وغيرها من "المجوهرات".

شئنا أم أبينا ، في واقع الأمر ،سوف تظهر المستقبل. من المهم في أي شكل من أشكال بناء الموقع أن يكون من غير المنطقي فقط رسم المحتوى في الطبقات ، ولكن أيضًا لضمان الحركة الصحيحة بينهما.

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

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

عادة ما يختار المطور عددًا مفضلاً ويعطيبه كل العلامات في صف واحد ، وأولئك الذين يحتاجون إلى تميّز بطريقة ما ، يعيّن العدد التالي. لإيلاء أهمية لطبقات ومستويات الصفحة ليست ممارسة تقدمية وواعدة بشكل خاص.

ومع ذلك ، إذا قمت بنقل دلالات z-index إلىالحوار مع الزائر ، يمكنك إنشاء تأثير عملي. بنفس الطريقة التي يمكن أن تتداخل بها العلامات ، يمكنك تراكب الحوارات (زوار الموقع) والانتقال بينها. من وجهة النظر هذه ، فإن استخدام قاعدة CSS لعامل z-index معقول جدا وعملي.