الكورس

Advertisements

خاصية Position فى CSS


سيعلمك هذا الفصل خاصية Position فى CSS بالتفصيل، وكيفية إستخدامها؟ ومعرفة القيم المختلفة لها، مع بعض الأمثلة التوضيحية.


 

خاصية Position فى CSS

 

تحدد خاصية position كيفية وضع العنصر في صفحة الويب.

هناك 5 قيم مختلفة للـ position:

  • static.
  • relative.
  • absolute.
  • fixed.
  • sticky.

 

ثم يتم التحكم فى وضع العناصر باستخدام الخصائص (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>
Static Position

 

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>
First Box
Second Box
Third Box

 

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>
Relative Position
Absolute Position

تتم إزالة العناصر المطلقة absolute ذات المواضع من التدفق العادي ، ويمكن أن تتداخل مع العناصر.


Advertisements

 

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>
Fixed Position Example

 

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>
Sticky Position

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.



الإبلاغ عن خطأ

×

إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:

[email protected]

شكرًا لك على مساعدتك لنا!

Advertisements