4.0 KiB
4.0 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
587d781e367417b2b2512ac9 | Change an Element's Relative Position | 0 | تغيير موضع نسبي للعنصر |
Description
CSS Box Model
. تبدأ عناصر مستوى الحظر تلقائيًا في سطر جديد (فكّر في العناوين ، والفقرات ، والعناوين الفرعية) ، بينما تجلس العناصر المضمّنة داخل المحتوى المحيط (مثل الصور أو الامتدادات). يُسمى التنسيق الافتراضي للعناصر بهذه الطريقة normal flow
للمستند ، ولكن يوفر CSS خاصية الموضع لتجاوزه. عندما يتم تعيين موضع عنصر ما إلى relative
، فإنه يتيح لك تحديد كيفية نقل CSS له بالنسبة إلى موضعه الحالي في التدفق العادي للصفحة. أزواج مع خصائص تعويض CSS من left
أو right
، top
أو bottom
. يوضح ذلك عدد البكسلات أو النسب المئوية أو نظام الإدارة البيئية لنقل العنصر بعيدًا عن موضعه الطبيعي. المثال التالي ينقل الفقرة 10 بكسل من الأسفل: ص {لا يؤدي تغيير موضع عنصر ما إلى نسبي إلى إزالته من التدفق العادي - حيث لا تزال عناصر أخرى حوله تتصرف كما لو كان هذا العنصر في موضعه الافتراضي. ملحوظة
موقف: قريب
أسفل: 10 بكسل ؛
}
يمنحك التموضع الكثير من المرونة والقوة على التخطيط المرئي للصفحة. من الجيد أن نتذكر أنه بغض النظر عن موضع العناصر ، يجب تنظيم ترميز HTML الأساسي وجعله منطقيًا عند القراءة من الأعلى إلى الأسفل. هذه هي الطريقة التي يدخل بها المستخدمون الذين يعانون من إعاقات بصرية (الذين يعتمدون على أجهزة مساعدة مثل قارئات الشاشة) إلى المحتوى الخاص بك.
Instructions
position
h2
إلى relative
، واستخدم إزاحة CSS لتحريكها بمقدار 15 بكسل بعيدًا عن الجزء top
من المكان الذي توجد فيه في التدفق العادي. لاحظ أنه لا يوجد أي تأثير على مواضع عناصر h1 و p المحيطة. Tests
tests:
- text: يجب أن يكون لعنصر <code>h2</code> خاصية <code>position</code> معيّنة إلى <code>relative</code> .
testString: 'assert($("h2").css("position") == "relative", "The <code>h2</code> element should have a <code>position</code> property set to <code>relative</code>.");'
- text: يجب أن تستخدم شفرتك تخالف CSS لوضع <code>h2</code> 15px بشكلٍ نسبي بعيدًا عن <code>top</code> المكان الذي توجد فيه عادةً.
testString: 'assert($("h2").css("top") == "15px", "Your code should use a CSS offset to relatively position the <code>h2</code> 15px away from the <code>top</code> of where it normally sits.");'
Challenge Seed
<style>
h2 {
}
</style>
<body>
<h1>On Being Well-Positioned</h1>
<h2>Move me!</h2>
<p>I still think the h2 is where it normally sits.</p>
</body>
Solution
// solution required