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

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

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

تحديد المواقع النسبية في CSS

في تحديد المواقع النسبية، تتحرك الكتلة بالنسبة لها موقف البداية. ومع ذلك، بعد أن كتب إلى الكتلة:

المنصب: نسبي؛

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

كيف تعمل؟

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

نحن بحاجة إلى تحريك الكتلة الحمراء لأسفل بمقدار 10 بكسل. لا يمكن القيام بذلك إلا عن طريق تغيير موضع الكتلة الحمراء بالقوة. هذه هي الطريقة التي نكتبها أعلى: 10 بكسل، ولكن هل تحتاج إلى الإشارة إلى المكان الذي سيتم حساب وحدات البكسل العشرة هذه منه؟

بعد أن سجلت الموقف: نسبي، نوضح أننا نحسب بالنسبة إلى وضعه الحالي.

كتلة صفراء (
لون الخلفية: #ffe70f؛
}

كتلة نسبية (
الموقف: نسبي؛
أعلى: 10 بكسل؛
لون الخلفية: #ed5b77؛
}

في الصورة نرى كيف تحركت الكتلة الحمراء للأسفل بمقدار 10 بكسل للأسفل من موضعها الأصلي.

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

تحديد المواقع المطلق في CSS

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

الموقف: مطلق؛

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

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

حظر مع الفصل كتلة مطلقةيكون داخل الوالدين كتلة صفراء.

كتلة صفراء (
الموقف: نسبي؛
الحشو: 10 بكسل؛
لون الخلفية: #ffe70f؛
}

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

الكتلة المطلقة (
الموقف: مطلق؛
أسفل: 10 بكسل؛
اليسار: 10 بكسل؛
لون الخلفية: #ed5b77؛
}

تحديد المواقع الثابتة

عند التمرير في الصفحة، يتم إنشاء كتلة بها الموقف: ثابت، سيبقى في مكانه، تُستخدم هذه الطريقة عادةً لإصلاح شريط التنقل.

مؤشر z

يحل ترتيب الكتل "المطلقة" المتداخلة. نحتاج أن تكون الكتلة الحمراء أعلى الكتلة الصفراء، ثم نشير مؤشر z: 2 للأحمر و مؤشر z: 1 للأصفر.

كتلة حمراء (
الموقف: نسبي؛
مؤشر z: 2؛
لون الخلفية: #ffe70f؛
}

كتلة صفراء (
الموقف: مطلق؛
أعلى: 20 بكسل؛
مؤشر z: 1؛
لون الخلفية: #ed5b77؛
}

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

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

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

نظرة عامة على طرق تحديد المواقع المتاحة

خاصية CSSيحدد الموضع نوع موضع العنصر.

خيارات تحديد المواقع

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

للقيام بذلك، تحتاج إلى تعيين خاصية الموضع إلى واحدة من القيم التالية:

• نسبي
• مطلق
• مُثَبَّت
• لزج

وفقط بعد تحديد الموضع، يمكنك استخدام الخصائص التي تعوض العنصر:

• يمين
• قاع
• القيمة البدائيةهذه الخصائص - الكلمة الرئيسيةآلي.

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

الاختلافات بين طرق تحديد المواقع الرئيسية

الآن دعونا نلقي نظرة سريعة على الثلاثة الاختلافات الأساسيةبين الأنواع المتاحةالتمركز:

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

يمكنك رؤية ذلك بمزيد من التفاصيل في العرض التوضيحي:

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

عناصر تحديد المواقع مع نوع تحديد المواقع المطلق

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

لذلك، قررت أن أبدأ به عند وصف ميزات تحديد المواقع غير المعروفة.

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

ويتضح ذلك من خلال المثال التالي:

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

ومع ذلك، فقد قمنا بوضع الغلاف الخارجي نسبيًا (عنصر من فئة جمبوترون). لاحظ كيف يتغير موضع الكتلة الخضراء عندما يتغير نوع تحديد موضع أسلافها.

تتجاهل العناصر ذات الموضع المطلق الخاصية float

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

ألق نظرة على العرض التوضيحي المقابل:

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

العناصر المضمنة الموضوعة بشكل مطلق تصبح عناصر كتلة

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

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

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

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

العناصر التي تم وضعها بشكل مطلق لا تحتوي على حشوة قابلة للانهيار

افتراضيًا، عندما يتلامس هامشان رأسيان، يتم دمجهما في هامش واحد يساوي الحد الأقصى لهما. وهذا ما يسمى انهيار الهامش.

سلوك العناصر التي تم وضعها بشكل مطلق هنا يشبه العناصر العائمة - لا يتم دمج الحشو الخاص بها مع جيرانها.

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

ولكن كيف يمكننا منع الهوامش من الانهيار؟ نحن بحاجة إلى وضع نوع من الفاصل بينهما.

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

تحديد موضع العناصر بالبكسل والنسب المئوية

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

إنه مربك بعض الشيء، أليس كذلك؟ لذلك دعونا نرى أولاً ما تقوله المواصفات حول نسبة الإزاحة:

الإزاحة كنسبة مئوية من العرض (لليسار واليمين) أو الارتفاع (للأعلى أو للأسفل) كتلة الوالدين. بالنسبة للعناصر الملصقة، يتم حساب الإزاحة كنسبة مئوية من العرض (لليسار واليمين) أو الارتفاع (للأعلى أو للأسفل) للتدفق. القيم السلبية مقبولة.

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

يظهر العرض التوضيحي هذا الاختلاف:

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

وإذا اخترنا نسبة مئوية للإزاحة، فإن النتيجة ستعتمد على حجم العنصر الأصلي. فيما يلي تصور يوضح كيفية حساب الموضع الجديد:

ملحوظة: كما تعلم، فإن خاصية التحويل (مع وظائف مختلفةترجمة) يسمح لك أيضًا بتغيير موضع العنصر. ولكن في هذه الحالة، عند استخدام النسب المئوية، سيعتمد الحساب على حجم العنصر نفسه، وليس على الأصل.

خاتمة

آمل أن يكون هذا المقال قد ساعدك على فهم تحديد المواقع بشكل أفضل في CSS وتوضيح بعض التحديات.

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

تعليمات

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

يقوم Ctrl وShift والسهم لليمين/لليسار بتمييز الكلمة، وإذا استخدمت الأسهم لأعلى أو لأسفل، فيمكنك تمييز فقرة بأكملها.

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

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

يمكن أيضًا استدعاء الأوامر من لوحة المفاتيح. تسمح لك مجموعات المفاتيح Ctrl وX بقص الجزء المطلوب من النص، و مفاتيح السيطرةوV - الصقه في مكان آخر من المستند. يمكنك أيضًا استخدام الأزرار الموجودة على شريط الأدوات في علامة التبويب "الصفحة الرئيسية".

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

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