CSS Box Model
. تبدأ عناصر مستوى الحظر تلقائيًا في سطر جديد (فكّر في العناوين ، والفقرات ، والعناوين الفرعية) ، بينما تجلس العناصر المضمّنة داخل المحتوى المحيط (مثل الصور أو الامتدادات). يُسمى التنسيق الافتراضي للعناصر بهذه الطريقة normal flow
للمستند ، ولكن يوفر CSS خاصية الموضع لتجاوزه. عندما يتم تعيين موضع عنصر ما إلى relative
، فإنه يتيح لك تحديد كيفية نقل CSS له بالنسبة إلى موضعه الحالي في التدفق العادي للصفحة. أزواج مع خصائص تعويض CSS من left
أو right
، top
أو bottom
. يوضح ذلك عدد البكسلات أو النسب المئوية أو نظام الإدارة البيئية لنقل العنصر بعيدًا عن موضعه الطبيعي. المثال التالي ينقل الفقرة 10 بكسل من الأسفل: ص {لا يؤدي تغيير موضع عنصر ما إلى نسبي إلى إزالته من التدفق العادي - حيث لا تزال عناصر أخرى حوله تتصرف كما لو كان هذا العنصر في موضعه الافتراضي. ملحوظة
موقف: قريب
أسفل: 10 بكسل ؛
}
position
h2
إلى relative
، واستخدم إزاحة CSS لتحريكها بمقدار 15 بكسل بعيدًا عن الجزء top
من المكان الذي توجد فيه في التدفق العادي. لاحظ أنه لا يوجد أي تأثير على مواضع عناصر h1 و p المحيطة. h2
خاصية position
معيّنة إلى relative
.
testString: 'assert($("h2").css("position") == "relative", "The h2
element should have a position
property set to relative
.");'
- text: يجب أن تستخدم شفرتك تخالف CSS لوضع h2
15px بشكلٍ نسبي بعيدًا عن top
المكان الذي توجد فيه عادةً.
testString: 'assert($("h2").css("top") == "15px", "Your code should use a CSS offset to relatively position the h2
15px away from the top
of where it normally sits.");'
```
I still think the h2 is where it normally sits.
```