translate and postion

بتاريخ 2 دقائق مضت قال محمد قماري:

قلت لي انه يوجد postion فقط لنقل المحتوى ولكن حتا translate تنقل محتوى

ال position :يغير مكان العنصر داخل الصفحة.

اما ال translate :يغير شكل ومكان العرض من غير ما يأثر على مكانه المنطقي.

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

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

أما translate فهي تحريك . أى تقوم بتحريك العنصر من مكانه الحالي أى يتم التحريك بالنسبة لموضعه الأساسي وليس من الصفحة بأكلمها وهي تشبه وضع قيمة relative للخاصية position.

إذا قم باستخدام position عندما تريد تغيير تخطيط الصفحة وقم باستخدام translate لتحريك العنصر من مكانه الأساسي.

لم افهم بضبط متى استعملهما

بتاريخ 14 ساعة قال محمد قماري:

لم افهم بضبط متى استعملهما

يجب استيعاب آلية عمل كل منهما أولاً، فباستخدام خاصية position مثل relative, absolute, fixed مع خصائص الإزاحة top, left, right, bottom، فأنت تقوم بتغيير مكان العنصر ضمن تخطيط الصفحة.

حيث position: relative تعمل على تحريك العنصر بصريًا من مكانه الأصلي، لكن المتصفح لا يزال يحجز مساحته الأصلية في تدفق الصفحة، والعناصر الأخرى لا تتأثر ولا تملأ الفراغ الذي تركه.

بينما position: absolute أو position: fixed يتم إخراج العنصر بالكامل من تدفق الصفحة، والعناصر الأخرى تتصرف وكأنه غير موجود وتملأ مكانه، ويصبح العنصر وكأنه يطفو فوق الصفحة.

ونستخدم position: relative تمهيدًا لاستخدام position: absolute حيث يتم تحريك العنصر تبعًا لأقرب عنصر أب له به يمتلك خاصية position: relative.

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

• https://developer.mozilla.org/en-US/docs/Web/CSS/position

ونستخدم خاصية position من أجل تصميم هيكل الصفحة أي تحديد مكان العناصر في الصفحة، بينما خاصية transform: translate() نستخدمها من أجل تأثيرات الحركة أو أي تغيير بصري لا نريده أي يؤثر على بقية عناصر الصفحة، حيث تلك الخاصية هي جزء من مجموعة التحويلات transform، وهي تعمل في مرحلة لاحقة من عرض الصفحة، لأنّ

transform: translate(x, y)

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

قم بتجربة تأثيرها هنا:

• https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate

لتتفعل خاصية postoin absolute يجب ان يكون الأب بتاعو postoin relateve صحيح ؟

بتاريخ 12 دقائق مضت قال محمد قماري:

لتتفعل خاصية postoin absolute يجب ان يكون الأب بتاعو postoin relateve صحيح ؟

هذا صحيح

• لان العنصر اللي واخد position: absolute يتحرك بالنسبة للأب، لازم الأب يكون عنده position: relative (أو أي قيمة غير static مثل relative, او absolute, أو fixed).
• و اذا كان الأب ليس position: relative أو أي قيمة غير static → العنصر الـ absolute هيتعامل مع أقرب عنصر أب لديه position غير static، و اذا لم يجد اي اب سوف يتحرك بالنسبة للـ صفحة نفسها (body/html).

و لنأخذ مثال:

<div class="parent">
  <div class="child">أنا مطلق - absolute</div>
</div>


// CSS >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>.
.parent {
  width: 200px;
  height: 200px;
  background: lightblue;
  position: relative; /* 👈 مهم */
}

.child {
  position: absolute;
  top: 20px;
  left: 20px;
  background: coral;
}

• هنا الـ .child هيتحدد مكانه 20px من فوق و 20px من اليسار بالنسبة للأب .parent.