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