الوضع النسبي - ما هو؟ وصف مفصل

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

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

ما هي تقنية CSS؟

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

كلمة "الطاولة" في الترجمة الرسمية ظهرت تقريبا عن طريق الصدفة - في الواقع أكثر ملاءمة هنا سيكون لاستخدام كلمة "القوائم" أو "قوائم"، لكن واضعي الترجمة الأصلية قررت أن CSS يشبه أكثر من قائمة، ومن نحن هذا هو الآن في محاولة منهم.

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

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

ما يقوم به خاصية الموضع؟

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

ما هي القيم التي يمكن للخاصية الموضع؟

ممتلكاتنا يمكن أن نقبل عدة قيم مختلفة، وهناك خمسة فقط. وفيما يلي وصفا موجزا عن كل:

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

العمل مع الوظيفة في مختلف المتصفحات

ليس كل متصفحات متوافقة على حد سواء. في حين أن معظم برامج بديلة لتصفح الإنترنت دون أي عقبات قيمة الوظيفة ينظر صحيحة على الاطلاق "مزمن تعتبر الخاصة» إنترنت إكسبلورر الممتلكات، واعتمادا على نسخته.

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

بقية المراقبين التعامل بهدوء مع الوظيفة النسخة الأولى، باستثناء الأوبرا، الذي حصل على دعم من الخصائص في تنوعاتها 4، التي نشرت في منتصف 90s.

العمل مع الوظيفة في جافا سكريبت

في الواقع، هو، أدرجنا قصة كيفية العمل مع خاصية الموضع في جافا سكريبت فقط من أجل اللياقة. بسبب عدم توفر هذه الخاصية أي أحرف خاصة في العنوان، يمكنك استخدام JS دون أي تغيير، على سبيل المثال، لتعيين الوظيفة شعبة النسبية، وينبغي أن يشمل مثل هذا الخط: div.style.position = "النسبي".

كما ترون، انها بسيطة جدا.

لماذا الوظيفة مزايا النسبية اهتماما خاصا؟

في حين أن معظم الوظيفة قيم العقارات، بعبارة ملطفة، "بصق" على العناصر المحيطة، وذلك باستخدام قيمة "موقف نمط: قريب"، ينبغي أن نتذكر دائما عن صفحة كاملة ككل، لأن الاستخدام غير السليم قد بقوة محتويات الشاشة "انحراف" .

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

عندما يجب عليك استخدام تحديد المواقع النسبية؟

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

هذه "الحيل" تنفذ من خلال جافا سكريبت، أو، إذا كنت تهدف لفرض التدريجي، من خلال خصائص CSS3، والتي تسمح لك لضبط التغيير الدوري في قيمة متغير معين.

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

أمثلة من استخدام الترتيب النسبي

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

دعونا نبدأ مع خط "نفد". افترض أن لديك حاجة لعنصر من شأنها أن "السفر" لأن الحافة اليسرى من الشاشة وببطء نقله إلى الجانب الأيمن. لتنفيذ مثل هذه "الآلية" يجب تحديد موقف: النسبية. اليسار: -100px، حيث -100 - العدد التقريبي للبكسل تشكل عرض كتلة. وهذا النمط يسمح لك لإخفاء وحدة خارج الشاشة، ووضعها في "نقطة الانطلاق". الآن يمكنك استخدام برنامج نصي من شأنها أن تزيد كل أجزاء قليلة من الثانية ترك قيمة العقار لكل وحدة طالما أنه لا يصبح مساويا لعرض نافذة المتصفح ناقص عرض العنصر. والنتيجة هي وحدة الذي يخرج من الحافة اليسرى، وتوالت عبر الشاشة و"متوقفة" في يده اليمنى.

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

الأخطاء النموذجية عند استخدام الوضع النسبي

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