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

مرجع HTML دروس HTML دورات فيديو حول إنشاء موقع الويب

مع خاصية POSITION

ملكية	قيم	إلخ*	HC*
موضع	ثابت، نسبي، مطلق، ثابت، يرث	+	-

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

قيم:

ثابتة- تحديد المواقع ثابت، كما هو.
يرث- وراثة الممتلكات من الوالدين.

دعونا نلقي نظرة على القيم المتبقية بمزيد من التفصيل.

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

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

العنصر ( الموضع: نسبي؛ الأعلى: 25 بكسل؛ اليسار: 50 بكسل؛ الارتفاع: 100 بكسل؛ العرض: 100 بكسل؛ الحد: 2 بكسل صلب #000؛)
— تم ضبط موضع الكتلة التي تحتوي على الصورة نسبيوإزاحة من الأعلى بمقدار 25 بكسل ومن اليسار بمقدار 50 بكسل. لقد تحرك العنصر بالنسبة إلى التدفق الطبيعي، مما يؤدي عمليًا إلى مضاعفة هذه القيم:

القيمة المطلقة: تحديد المواقع المطلقة

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

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

العنصر ( الموضع: مطلق؛ الأعلى: 25 بكسل؛ اليسار: 50 بكسل؛ الارتفاع: 100 بكسل؛ العرض: 100 بكسل؛ الحد: 2 بكسل صلب #000؛)

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

ومعنى ثابت: موضع ثابت

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

قيمة الاستخدام مُثَبَّتنادرًا. عادة هذا هو القائمة الأفقيةفي أعلى الصفحة أو أسفلها، كما هو الحال في بريد Yandex.

خاصية Z-INDEX

ملكية	قيم	إلخ*	HC*
عدد صحيح، تلقائي، وراثة	+	-

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

قيم:

آلي— يتم ترتيب العناصر حسب موقعها في رمز الصفحة.
يرث- الميراث من أحد الوالدين.

العنصر-1، العنصر-2، العنصر-3 (الموضع:نسبي؛)
.element-1 ( فهرس z: 3؛ اليسار: 40 بكسل؛ الأعلى: 50 بكسل؛ حجم الخط: 46 بكسل؛)
.element-2 ( z-index:2; left:50px;)
.element-3 ( z-index:1; top:-50px; حجم الخط:76px; اللون:#999;)

- لدينا صورة باعتبارها العنصر الثاني. لقد تغير ترتيب وضع العنصرين الأول والثالث. تم وضع العنصر السفلي-1 في الأعلى، وتبين أن العنصر الثالث هو "الطبقة" السفلية:

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

تحديد المواقع الافتراضي (ثابت)

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

تحديد المواقع المطلق (المطلق)

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

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

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

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

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

ومع ذلك، يمكن أيضًا إنشاء موضع الكتلة هذا باستخدام خصائص الهامش(المسافات البادئة).

لا يعد استخدام الموضع النسبي أمرًا ممتعًا بمفرده، فهو يستخدم غالبًا بالتزامن مع الموضع المطلق.

دعونا نفكر في الخيارات:

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

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

الموضع النسبي - الموضع النسبي

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

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

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

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

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

بحاجة إلى أن نفهم كيف يتم تعيين المسافات البادئة. على سبيل المثال، left: 400px تعني مسافة بادئة من الجانب الأيسر إلى اليمين بالقدر المقابل، وtop: 100px تعني من الجانب العلوي إلى الأسفل. إذا قمت بتحديد قيم سلبية لليسار واليمين والأعلى والأسفل، فسيتحرك العنصر في الاتجاه المعاكس (على سبيل المثال، الأعلى إلى الأعلى واليسار إلى اليسار).

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

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

ونتيجة لذلك، سوف نحصل على شيء مثل هذه اللوحة الزيتية:

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

الآن دعونا نضيف إلى قواعد CSSلموضع الحاوية الأولى: نسبي وقم بتعيين الهوامش اليسرى والعليا باستخدام اليسار والأعلى:

نتيجة لذلك، سنرى أن العنصر العائم قد تحرك وفقًا للهوامش المحددة:

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

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

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

الموضع المطلق - الموضع المطلق في CSS

دعونا ننتقل إلى النظر في تحديد المواقع المطلقة. أسهل طريقة لبدء النظر إلى قاعدة CSS هذه هي باستخدام مثال توضيحي. لنفترض أنه داخل حاوية Div لدينا علامة Span مضمنة، والتي سنقوم بتعيين موضعها المطلق.

لكن أولاً، دعونا ننظر إلى هذا البناء دون إضافة "الموضع: مطلق". وفي الوقت نفسه، للتأكيد على خط Span، سنضيف إليه ارتفاعًا، والذي لن يتم تطبيقه على أي حال، وهذه المرة سنضيف كود CSS، للتغيير، وليس من خلال بناء Head:

<نوع النمط="text/css"> #abs( الخلفية:#FFC0C0; الهامش الأيسر: 100px; ) #absspan( الخلفية:#C0FFC0; الارتفاع:100px; )

بالنسبة لـ Div، قمنا أيضًا بتعيين الهامش الأيسر على 100 بكسل. حسنًا، لنرى الآن ما الذي سيتغير إذا أعطينا علامة خط الامتداد موضعًا مطلقًا عن طريق الإضافة موقف CSS القواعد المطلقة:

#abs تمتد (الخلفية: #C0FFC0؛ الارتفاع: 100 بكسل؛ الموضع: مطلق؛ )>

شيء غريب حدث. انطلاقًا من حقيقة أنه تم تطبيق خاصية height:100px على Span، فقد توقفت عن كونها علامة مضمّنة. ومن الواضح بعد ذلك أن الجزأين "الأول" و"الثالث" قد تم ضمهما لبعضهما البعض، كما لو أن العنصر الذي يحمل كلمة "الثاني" لم يعد موجودًا بينهما. هذه هي بالضبط الطريقة التي يعمل بها تحديد المواقع المطلق في CSS.

ولكن دعونا ننظر إلى كل شيء نقطة بنقطة عند تعيين خاصية لعنصر ما "الموضع: مطلق":

1. تصبح العلامة التي تم تحديد هذه القاعدة لها علامة كتلة
2. سيتم تحديد أبعاد هذه الكتلة من خلال المحتوى الذي تحتوي عليه (ما لم تحددها صراحة باستخدام العرض والارتفاع).

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

إذا كنت تتذكر المقالة السابقة من قسم ""، فسترى أن هذه النقاط الثلاث تمت ملاحظتها عند إنشاء العناصر العائمة باستخدام Float.

لذلك، إذا تم تعيين Float بالفعل لعلامة، ولكن تم تحديد "الموضع: مطلق" لها، فسيتم إعادة تعيين الأول بواسطة المتصفح (المسؤول عن تحليل الكود) إلى لا شيء (القيمة الافتراضية)، لأن فلا فائدة من تنفيذ نموذجين متطابقين.

3. العلامة ذات "الموضع: مطلق" المحددة لا تتفاعل مع أي عناصر كود HTML أخرى باستثناء أقرب عنصر تمرير لها. جميع العلامات الأخرى في الكود ببساطة لا تلاحظ عنصرًا ذو موضع مطلق (وهذا يمكن رؤيته من مثالنا)

كل هذا جيد، ولكن بمساعدة "المطلق" يجب علينا تنفيذ تحديد المواقع المطلق. حسنًا، في الواقع، هذا صحيح بالفعل. وبالاشتراك معها، يمكننا استخدام نفس قواعد CSS الأربع: اليسار واليمين والأعلى والأسفل. كيف سيعملون مع تحديد المواقع المطلق؟

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

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

من خلال تحديد الموقع المطلق، سنكون قادرين على تعيين الحاوية بأنفسنا (ستكون أول من قام بالأسلاف تختلف قيمة الموضع عن القيمة الثابتة، يُستخدم بشكل افتراضي).

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

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

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

#abs تمتد (الخلفية: #C0FFC0؛ الارتفاع: 100 بكسل؛ الموضع: مطلق؛ اليسار: 0؛ الأعلى: 0؛ )>

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

الجمع بين الموضع المطلق والنسبي في تخطيط Div

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

إذا أدخلنا "نسبي" لعلامة الجسم، فسوف تتغير صورتنا قليلاً:

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

الآن دعونا، بالإضافة إلى ما تم إنجازه بالفعل، نكتب "الموضع: نسبي" لحاوية Div، التي توجد بداخلها علامة Span:

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

علاوة على ذلك، إذا كتبنا أيضًا لـ Div، فسنرى أن منطقة المحتوى ذات الحشو الداخلي الحالي سيتم استخدامها كحاوية لتحديد الموضع المطلق:

#abs (الخلفية: #FFC0C0؛ الهامش الأيسر: 100 بكسل؛ الموضع: نسبي؛ الحدود: 12 بكسل منقط #ccf؛ الحشو: 20 بكسل؛)

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

يمكن تحديد المسافات البادئة (الإزاحة) لليسار واليمين والأعلى والأسفل ليس فقط في الوحدات المطلقة(اقرأ عن )، ولكن أيضًا كنسبة مئوية، والتي سيتم أخذها من العرض (اليسار واليمين) والارتفاع (الأعلى والأسفل) للحاوية الناتجة. أولئك. "top:100%" سيتوافق مع 100% من ارتفاع الحاوية، و"left:100%" سيتوافق مع 100% من عرضها.

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

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

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

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

الموضع ثابت - انجذب إلى إطار العرض

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

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

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

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

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

كل التوفيق لك! نراكم قريبا على صفحات موقع المدونة

يمكنك مشاهدة المزيد من الفيديوهات بالذهاب إلى

");">

أنت قد تكون مهتم

تحديد المواقع باستخدام Z-index وقاعدة CSS Cursor لتغيير مؤشر الماوس
تعويم ومسح في CSS - أدوات تخطيط الكتلة
نمط قائمة(النوع، الصورة، الموضع) - قواعد CSS للتخصيص مظهرالقوائم في كود HTML
العرض (كتلة، لا شيء، مضمّن) في CSS - اضبط نوع العرض عناصر HTMLعلى صفحة الويب
ما هو CSS وكيفية ربط أوراق الأنماط المتتالية بها وثيقة HTMLوبناء الجملة الأساسي لهذه اللغة

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

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

1. أنواع تحديد المواقع

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

موضع
معنى:
ثابتة	القيمة الافتراضية تعني عدم تحديد المواقع. يتم عرض العناصر بالتسلسل واحدًا تلو الآخر بالترتيب الذي تم تعريفها به في مستند HTML. يستخدم لمسح أي قيمة تحديد موضع أخرى.
نسبي	يتم نقل العنصر الذي تم وضعه نسبيًا من موضعه الطبيعي في اتجاهات مختلفة بالنسبة لحدود الحاوية الأصلية الخاصة به، لكن المساحة التي يشغلها لا تختفي. ومع ذلك، قد يتداخل هذا العنصر مع محتوى آخر على الصفحة. إذا قمت بتعيين الخصائص لأعلى ولأسفل أو لليسار ولليمين في نفس الوقت بالنسبة لعنصر تم وضعه نسبيًا، ففي الحالة الأولى سيعمل الجزء العلوي فقط، وفي الحالة الثانية - اليسار. يتيح لك تحديد الموضع النسبي تعيين فهرس z لعنصر ما، بالإضافة إلى تحديد موضع العناصر الفرعية بشكل مطلق داخل الكتلة.
مطلق	تتم إزالة العنصر الذي تم تحديد موضعه بشكل مطلق تمامًا من تدفق المستند ويتم وضعه بالنسبة إلى حدود كتلة الحاوية الخاصة به (عنصر آخر أو نافذة متصفح). كتلة الحاوية لعنصر تم وضعه بشكل مطلق هي أقرب عنصر سلف تكون قيمة خاصية موضعه غير ثابتة. يتم تحديد موقع حواف العنصر باستخدام خصائص الإزاحة. تنهار المساحة التي يشغلها هذا العنصر كما لو أن العنصر غير موجود في الصفحة. يمكن للعنصر الذي تم وضعه بشكل مطلق أن يتداخل أو يتم تركيبه بواسطة عناصر أخرى (بسبب خاصية z-index). أي عنصر تم وضعه بشكل مطلق يولد كتلة، أي أنه يأخذ عرض القيمة: block؛ .
مُثَبَّت	إصلاح عنصر في موقع محدد على الصفحة. كتلة الحاوية للعنصر الثابت هي إطار العرض، أي أن العنصر ثابت دائمًا بالنسبة لنافذة المتصفح ولا يغير موضعه أثناء التمرير في الصفحة. تتم إزالة العنصر نفسه بالكامل من تدفق المستند الرئيسي ويتم إنشاؤه في تدفق مستند جديد.
أولي	يضبط قيمة الخاصية على القيمة الافتراضية.
يرث	يرث قيمة الخاصية من العنصر الأصل.

أرز. 1. الفرق بين تحديد المواقع الثابتة والنسبي والمطلق

2. خصائص الأوفست

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

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

3. تحديد المواقع داخل العنصر

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

.wrap ( الحشو: 10 بكسل؛ الارتفاع: 150 بكسل؛ الموضع: نسبي؛ الخلفية: #e7e6d4؛ محاذاة النص: يمين؛ الحد: 3 بكسل متقطع #645a4e؛ ) .أبيض (الموضع: مطلق؛ العرض: 200 بكسل؛ أعلى: 10 بكسل؛ يسار) : 10 بكسل الحشو: 10 بكسل الخلفية: #ffffff الحدود: 3 بكسل متقطع #312a22؛
أرز. 2. تحديد المواقع النسبية المطلقة

4. مشاكل تحديد المواقع

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

5. حرية حركة العناصر

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

أرز. 3. حرية حركة العناصر

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

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

تقوم الخاصية تلقائيًا بتغيير القيمة المحسوبة (التي يعرضها المتصفح) لخاصية العرض المراد عرضها: كتلة للقيم التالية: inline , inline-block , table-row , table-row-group , table-column , table-column-group ، خلية الجدول، تسمية توضيحية للجدول، مجموعة رأس الجدول، مجموعة تذييل الجدول. تتغير قيمة الجدول المضمن إلى الجدول.

الخاصية ليس لها أي تأثير على العناصر ذات العرض: flex و العرض: inline-flex .

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

وفي الوقت نفسه، لا تنهار الهوامش الرأسية للعناصر العائمة مع هوامش العناصر المجاورة، على عكس عناصر الكتلة العادية.

6. قم بإلغاء التدفق حول العناصر

6.1. خاصية واضحة

تحدد الخاصية Clear كيفية وضع العنصر الذي يتبع العنصر العائم. تلغي الخاصية التعويم على أحد جانبي العنصر أو كليهما الذي تم تعيينه بواسطة الخاصية float. لمنع عرض الخلفية أو الحدود ضمن العناصر العائمة، استخدم القاعدة (التجاوز: مخفي؛).

6.2. تنظيف دفق باستخدام الأنماط باستخدام فئة Clearfix وفئة :after الزائفة

لنفترض أن لديك حاوية كتلة لم يتم تحديد العرض والارتفاع لها. يتم وضع كتلة عائمة ذات أبعاد محددة بداخلها.

.container ( المساحة المتروكة: 20 بكسل؛ الخلفية: #e7e6d4؛ الحد: 3 بكسل متقطع # 645a4e؛ ) .floatbox ( تعويم: يسار؛ العرض: 300 بكسل؛ الارتفاع: 150 بكسل؛ الهامش الأيمن: 20 بكسل؛ الحشو: 0 20 بكسل؛ الخلفية: #ffffff الحد: 3 بكسل متقطع #666666؛ أرز. 4. "تأثير الانهيار" لكتلة الحاوية

حل للمشكلة:
نقوم بإنشاء فئة .clearfix وبالاشتراك مع الفئة الزائفة :after، نطبقها على كتلة الحاوية.

.container ( المساحة المتروكة: 20 بكسل؛ الخلفية: #e7e6d4؛ الحد: 3 بكسل متقطع # 645a4e؛ ) .floatbox ( تعويم: يسار؛ العرض: 300 بكسل؛ الارتفاع: 150 بكسل؛ الهامش الأيمن: 20 بكسل؛ الحشو: 0 20 بكسل؛ الخلفية: #ffffff الحدود: 3 بكسل متقطع #666666 .clearfix:after ( المحتوى: ""؛ العرض: كتلة؛ الارتفاع: 0؛ واضح: كلاهما؛ الرؤية: مخفي؛ )

الخيار الثاني لمسح الدفق:

Clearfix: بعد (المحتوى: ""؛ العرض: الجدول؛ واضح: كلاهما؛)
أرز. 5. تطبيق طريقة "التنظيف" على كتلة حاوية تحتوي على عنصر عائم

6.3. طريقة سهلة لتنظيف تيار

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

Ul ( الهامش: 0؛ نمط القائمة: لا شيء؛ الحشو: 20 بكسل؛ الخلفية: #e7e6d4؛ الفائض: تلقائي؛ ) li ( تعويم: يسار؛ العرض: كالك (100% / 3 - 20 بكسل)؛ الارتفاع: 50 بكسل؛ الهامش- اليمين: 20 بكسل؛ الخلفية: #ffffff الحدود: 3 بكسل متقطع #666666) li:last-child (الهامش الأيمن: 0؛) الشكل. 6. تنظيف تدفق القائمة الأفقية

موضع

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

نوع الملكية

الغرض: تحديد المواقع.

ينطبق على: جميع العناصر.

ورث: لا.

قيم

قيمة خاصية موضع CSS هي واحدة من الكلمات الدالةتحديد طريقة تحديد المواقع.

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

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

إدخال النسبة المئوية:غير موجود.

القيمة الافتراضية:ثابتة.

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

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

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

بناء الجملة

الموقف: ثابت | نسبي | مطلق | ثابت | يرث

مثال CSS: استخدام الموضع

إصدارات CSS

إصدار:	سي اس اس 1	سي اس اس 2	سي اس اس 2.1	سي اس اس 3
يدعم:	لا	نعم	نعم	نعم

المتصفحات

المتصفح:	متصفح الانترنت		جوجل كروم	موزيلا فايرفوكس	الأوبرا
إصدار:	6.0 و 7.0	8.0 وما فوق	2.0 وما فوق	2.0 وما فوق	9.2 وما فوق	3.1 وما فوق
يدعم:	جزئيا	نعم	نعم	نعم	نعم	نعم

لم يفهم Internet Explorer 6.0 و7.0 القيمة الموروثة، بينما لم يفهم IE 6.0 القيمة الثابتة بعد.