خاصية Position فى CSS
سيعلمك هذا الفصل خاصية Position فى CSS بالتفصيل، وكيفية إستخدامها؟ ومعرفة القيم المختلفة لها، مع بعض الأمثلة التوضيحية.
خاصية Position فى CSS
تحدد خاصية position كيفية وضع العنصر في صفحة الويب.
هناك 5 قيم مختلفة للـ position:
ثم يتم التحكم فى وضع العناصر باستخدام الخصائص (top – right – bottom – left). ومع ذلك ، لن تعمل هذه الخصائص ما لم يتم تعيين خاصية الـ position أولاً.
1. static
يتم وضع عناصر HTML كـ static (ثابتة) بشكل افتراضي.
لا تتأثر العناصر الثابتة ذات المواقع الثابتة بالخصائص (top – right – bottom – left).
مثال للتوضيح:
<style> div { position: static; border: 1px solid; padding: 10px; } </style> <div>Static Position</div>
2. relative
العنصر صاحب الموضع relative يتم وضعه نسبةً إلى وضعه الطبيعي.
يؤدي تعيين الخصائص العلوية واليمنى والسفلية واليسرى لعنصر ذو موضع relative إلى تعديله بعيدًا عن موضعه الطبيعي. كالتالى:
<style> div { border: 1px solid; display: inline-block; margin: 10px; padding: 15px; } .second_box { position: relative; top: 10px; left: 30px; } </style> <div class="first_box">First Box</div> <div class="second_box">Second Box</div> <div class="third_box">Third Box</div>
3. absolute
العنصر صاحب الموضع absolute يتم وضعه بالنسبة إلى أقرب سلف ancestor (إن وٌجد) تم وضعه. كما تتم إزالة العنصر من تدفق المستند العادي ، ولا يتم إنشاء مساحة للعنصر في تخطيط الصفحة.
ومع ذلك، إذا كان العنصر ذو الموضع absolute ليس له أسلاف موضوعة ، فإنه يستخدم جسم الصفحة، وينتقل مع تمرير الصفحة.
مثال للتوضيح:
<style> .relative_pos, .absolute_pos { padding: 15px; color: white; } .relative_pos { position: relative; background-color: red; width: 100%; height: 200px; } .absolute_pos { position: absolute; bottom: 50px; right: 20px; background-color: green; width: 100px; height: 100px; } </style> <div class="relative_pos">Relative Position</div> <div class="absolute_pos">Absolute Position</div>
تتم إزالة العناصر المطلقة absolute ذات المواضع من التدفق العادي ، ويمكن أن تتداخل مع العناصر.
4. fixed
العنصر صاحب الموضع fixed يتم وضعه بالنسبة إلى إطار العرض viewport، مما يعني أنه يبقى دائمًا في نفس المكان حتى إذا تم تمرير الصفحة.
مثال للتوضيح:
<style> .fixed_pos { position: fixed; bottom: 0; right: 0; background-color: #007cff; width: 186px; color: white; text-align: center; padding: 9px; } </style> <div class="fixed_pos">Fixed Position Example</div>
5. sticky
العنصر صاحب الموضع sticky يتم وضعه بناءًا على أقرب موضع تمرير المستخدم.
يقوم العنصر صاحب قيمة sticky بالتبديل بين relative و fixed ، اعتمادًا على موضع التمرير.
مثال للتوضيح:
<style> .container { width: 100%; height: 250px; overflow: scroll; } .sticky_pos { position: sticky; top: 0; left: 0; background-color: red; color: white; margin: 13px 0; padding: 12px; } </style> <div class="container"> <div class="sticky_pos">Sticky Position</div> <p>Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta. Nulla quis lorem ut libero malesuada feugiat. Pellentesque in ipsum id orci porta dapibus.</p> <p>Porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta. Nulla quis lorem ut libero malesuada feugiat. Pellentesque in ipsum id orci porta dapibus.</p> <p>Cras ultricies ligula sed magna dictum porta. Nulla quis lorem ut libero malesuada feugiat. Pellentesque in ipsum id orci porta dapibus.</p> <p>Ultricies ligula sed magna dictum porta. Nulla quis lorem ut libero malesuada feugiat. Pellentesque in ipsum id orci porta dapibus.</p> <p>Ligula sed magna dictum porta. Nulla quis lorem ut libero malesuada feugiat. Pellentesque in ipsum id orci porta dapibus.</p> <p>Quis lorem ut libero malesuada feugiat. Pellentesque in ipsum id orci porta dapibus.</p> <p>Libero malesuada feugiat. Pellentesque in ipsum id orci porta dapibus.</p> <p>MUt libero malesuada feugiat. Pellentesque in ipsum id orci porta dapibus.</p> </div>
Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta. Nulla quis lorem ut libero malesuada feugiat. Pellentesque in ipsum id orci porta dapibus.
Porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta. Nulla quis lorem ut libero malesuada feugiat. Pellentesque in ipsum id orci porta dapibus.
Cras ultricies ligula sed magna dictum porta. Nulla quis lorem ut libero malesuada feugiat. Pellentesque in ipsum id orci porta dapibus.
Ultricies ligula sed magna dictum porta. Nulla quis lorem ut libero malesuada feugiat. Pellentesque in ipsum id orci porta dapibus.
Ligula sed magna dictum porta. Nulla quis lorem ut libero malesuada feugiat. Pellentesque in ipsum id orci porta dapibus.
Quis lorem ut libero malesuada feugiat. Pellentesque in ipsum id orci porta dapibus.
Libero malesuada feugiat. Pellentesque in ipsum id orci porta dapibus.
MUt libero malesuada feugiat. Pellentesque in ipsum id orci porta dapibus.
الإبلاغ عن خطأ
×إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:
info@albashmoparmeg.com
شكرًا لك على مساعدتك لنا!