الـ Position من أهم خواص لغة CSS وتاخذ أكثر من قيمة:
[Static, Relative, Absolute, Fixed, Sticky]
- ايش معنى كل وحدة فيهم؟
- وايش الفرق بينهم؟
- وأهم استخداماتهم؟
هنا الإجابة 👇🏻💛
[Static, Relative, Absolute, Fixed, Sticky]
- ايش معنى كل وحدة فيهم؟
- وايش الفرق بينهم؟
- وأهم استخداماتهم؟
هنا الإجابة 👇🏻💛
![الـ Position من أهم خواص لغة CSS وتاخذ أكثر من قيمة:
[Static, Relative, Absolute, Fixed, Sticky]
-...](https://pbs.twimg.com/media/FJPGZoWWUAQ3Wjn.jpg)
1️⃣ القيمة Static
- هي القيمة الافتراضية (Default).
- العنصر ذو القيمة Static يبقى في مكانه اللي لما أنشئته حطيته فيه، يعني مثلًا أنشئت 3 عناصر من النوع p راح ينعرضو بالمتصفح تحت بعض بنفس الترتيب اللي أنشئتهم فيه.
- هي القيمة الافتراضية (Default).
- العنصر ذو القيمة Static يبقى في مكانه اللي لما أنشئته حطيته فيه، يعني مثلًا أنشئت 3 عناصر من النوع p راح ينعرضو بالمتصفح تحت بعض بنفس الترتيب اللي أنشئتهم فيه.
2️⃣ القيمة Relative
- مع هذه القيمة العنصر يتحرك بالنسبة لنفسه وبناء على مكانه الحالي ( داخل حدود الأب )، ولو حركته راح يتحرك لحاله بدون ما تتأثر بقية العناصر اللي في طريقه ولا يتغير مكانهم بسبب تحركه.
- مع هذه القيمة العنصر يتحرك بالنسبة لنفسه وبناء على مكانه الحالي ( داخل حدود الأب )، ولو حركته راح يتحرك لحاله بدون ما تتأثر بقية العناصر اللي في طريقه ولا يتغير مكانهم بسبب تحركه.
فمثلًا لو أعطيته الخاصية left:30px راح يتحرك لليمين 30 بكسل من مكانه الحالي، ولو في طريقه عناصر أخرى حيمشي فوقها عادي ما يسحبها معاه.
3️⃣ القيمة Absolute
- مع هذه القيمة العنصر يتحرك بحرية مطلقة بناءً على الصفحة بدون أي اعتبار للأب المباشر، مكانه وحركته ما راح تؤثر ببقية العناصر بالصفحة ولا هو راح يتأثر فيهم.
- مع هذه القيمة العنصر يتحرك بحرية مطلقة بناءً على الصفحة بدون أي اعتبار للأب المباشر، مكانه وحركته ما راح تؤثر ببقية العناصر بالصفحة ولا هو راح يتأثر فيهم.
طيب لو تبغى تحركه بحرية مطلقة لكن داخل أب معين ما تبغاه عايم بالصفحة؟
فقط أعطي للأب القيمة Relative وراح يتحرك العنصر ذو القيمة Absolute داخله فقط وما يخرج عنه.
فقط أعطي للأب القيمة Relative وراح يتحرك العنصر ذو القيمة Absolute داخله فقط وما يخرج عنه.
4️⃣ القيمة Fixed
- باستخدام القيمة Fixed راح يتحرك العنصر بناء على الصفحة وليس الأب، حتى لو أعطيت الأب القيمة Relative، بالإضافة إلى أنه يكون ثابت بنقطة معينة في الصفحة مهما عملت Scroll.
- باستخدام القيمة Fixed راح يتحرك العنصر بناء على الصفحة وليس الأب، حتى لو أعطيت الأب القيمة Relative، بالإضافة إلى أنه يكون ثابت بنقطة معينة في الصفحة مهما عملت Scroll.
من اهم استخدامات Fixed: زر الرجوع لأعلى (Back to Top) أو شات التواصل السريع اللي يكونوا ثابتين أسفل الشاشة في كثير من المواقع.
مثال لعنصر Fixed 👇🏻
5️⃣ القيمة Sticky
- تشبه القيمة Fixed لكن الفرق بينهم إن Sticky ما تكون ثابتة بالصفحة من البداية، إنما لما تعمل Scroll ويوصل العنصر للمكان اللي تبغاه يثبت فيه حيثبت.
يعني يُعامل بالبداية وكأنه Relative لغاية ما يوصل لنقطة معينة ويصير Fixed.. ولازم تحدد النقطة هذه.
- تشبه القيمة Fixed لكن الفرق بينهم إن Sticky ما تكون ثابتة بالصفحة من البداية، إنما لما تعمل Scroll ويوصل العنصر للمكان اللي تبغاه يثبت فيه حيثبت.
يعني يُعامل بالبداية وكأنه Relative لغاية ما يوصل لنقطة معينة ويصير Fixed.. ولازم تحدد النقطة هذه.
فنقول مثلًا:
position:sticky; top:0;
من أهم استخداماتها: القائمة العلوية ( Navbar ) أو هيدر بعض الجزئيات.
position:sticky; top:0;
من أهم استخداماتها: القائمة العلوية ( Navbar ) أو هيدر بعض الجزئيات.
مثال لعنصر Sticky 👇🏻
وشكرًا لوصولك إلى هنا، شاركها لتعمّ الفائدة 🤩🌷
جاري تحميل الاقتراحات...