خاصية موضع CSS

كيفية العمل معpositionالممتلكات في CSS

تحديد المواقع هو ما يجعلنا نحدد مكان ظهور العناصر على الشاشة وكيفية ظهورها.

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

في هذا المنشور ، سأرى أيضًا كيف تتغير الأشياء في الصفحة بناءً على كيفية اختلاف العناصرpositionتتفاعل مع بعضها البعض.

لدينا خاصية CSS رئيسية واحدة:position.

يمكن أن تحتوي على هذه القيم الخمس:

  • static
  • relative
  • absolute
  • fixed
  • sticky

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

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

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

إذا قمت بتعيينposition: relativeعلى عنصر ، يمكنك الآن وضعه مع الإزاحة باستخدام الخصائص

  • أعلى
  • حق
  • قاع
  • اليسار

التي تسمىخصائص تعويض. يقبلون قيمة طول أو نسبة مئوية.

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

<div class="parent">
  <div class="child">
    <div class="box">
      <p>Test</p>
    </div>
  </div>
</div>

مع بعض CSS لإعطاء بعض الألوان والحشو ، ولكن لا يؤثر على تحديد الموضع:

.parent {
  background-color: #af47ff;
  padding: 30px;
  width: 300px;
}

.child { background-color: #ff4797; padding: 30px; }

.box { background-color: #f3ff47; padding: 30px; border: 2px dotted #333; font-family: courier; text-align: center; font-size: 2rem; }

ها هي النتيجة:

يمكنك محاولة إضافة أي من الخصائص التي ذكرتها من قبل (topوrightوbottomوleft) إلى.boxولن يحدث شيء. الموقفstatic.

الآن إذا وضعناposition: relativeفي المربع ، في البداية على ما يبدو لا شيء يتغير. لكن العنصر قادر الآن على التحرك باستخدام امتدادtopوrightوbottomوleftوالآن يمكنك تغيير موضعه بالنسبة للعنصر الذي يحتويه.

على سبيل المثال:

.box {
  /* ... */
  position: relative;
  top: -60px;
}

قيمة سالبة لـtopسيجعل الصندوق يتحرك لأعلى نسبيًا إلى حاويته

أو

.box {
  /* ... */
  position: relative;
  top: -60px;
  left: 180px;
}

لاحظ كيف أن المساحة التي يشغلها الصندوق تظل محفوظة في الحاوية ، كما لو كانت لا تزال في مكانها.

خاصية أخرى ستعمل الآن هيz-indexلتغيير موضع المحور z. سنتحدث عنها لاحقًا.

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

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

تذكر في الوضع النسبي أننا لاحظنا أن المساحة التي يشغلها عنصر في الأصل محفوظة حتى لو تم تحريكها؟

مع تحديد المواقع المطلقة ، بمجرد أن نحددposition: absoluteتشغيل.box، المساحة الأصلية منهارة الآن ، والأصل فقط (إحداثيات س ، ص) تبقى كما هي

.box {
  /* ... */
  position: absolute;
}

يمكننا الآن تحريك الصندوق كما يحلو لنا ، باستخدام ملفtopوrightوbottomوleftملكيات:

.box {
  /* ... */
  position: absolute;
  top: 0px;
  left: 0px;
}

أو

.box {
  /* ... */
  position: absolute;
  top: 140px;
  left: 50px;
}

الإحداثيات مرتبطة بأقرب حاوية ليست كذلكstatic.

هذا يعني أننا إذا أضفناposition: relativeالى.childعنصر ، ونضعtopوleftإلى 0 ، لن يتم وضع المربع في أعلى الهامش الأيسر مننافذة او شباك، بل سيتم وضعه عند إحداثيات 0 ، 0 من.child:

.child {
  /* ... */
  position: relative;
}

.box { /* … */ position: absolute; top: 0px; left: 0px; }

إليك (كيف رأينا بالفعل) من.childثابت (الافتراضي):

.child {
  /* ... */
  position: static;
}

.box { /* … */ position: absolute; top: 0px; left: 0px; }

مثل تحديد المواقع النسبي ، يمكنك استخدامz-indexلتغيير موضع المحور z.

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

كما هو الحال مع الوضع المطلق ، عندما يتم تعيين عنصرposition: fixedتمت إزالته من تدفق الصفحة.

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

.box {
  /* ... */
  position: fixed;
}

.box {
  /* ... */
  position: fixed;
  top: 0;
  left: 0;
}

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

تحديد المواقع اللزجة

على الرغم من أن القيم المذكورة أعلاه كانت موجودة منذ فترة طويلة جدًا ، فقد تم تقديم هذه القيمة مؤخرًا ولا تزال غير مدعومة نسبيًا (انظر caniuse.com)

مكون UITableView iOS هو الشيء الذي يتبادر إلى الذهن عندما أفكر فيهposition: sticky. هل تعلم عندما تقوم بالتمرير في قائمة جهات الاتصال ويتم لصق الحرف الأول في الأعلى ، لإعلامك بأنك تشاهد جهات اتصال هذا الحرف المعين؟

استخدمنا JavaScript لمحاكاة ذلك ، ولكن هذا هو النهج الذي اتبعته CSS للسماح به محليًا.

تحميل مجانيكتيب CSS


المزيد من دروس css: