من فضلك ساعدنى ......... ما هو ال static,absolute,relative,fixed ) position ) فى css

حسنا شرح هذه العناصر بشكل كامل سيتطلب وقتا، لذا سأحاول أن أمر على خصائص كل واحدة مع صور للشرح

Position

خاصية position لا تعني المكان بالتحديد (ليس يعني في الأسفل أو في الأعلى) بل كيف سيتم التعامل مع العنصر وكيف سيتحرك ويوضع في مكانه

static

الخاصية الافتراضية التي يكون عليها كل العناصر إن لم تحدد له شيئا آخر

static ببساطة تجعل العنصر يتبع النمط العادي

عنصر بخاصية static لا تؤثر عليه القيم left;right;top;bottom (على عكس بقية القيم كما سنرى)

رسم توضيحي:

مثال حي:

relative

هذه الخاصية تعمل بنفس مبدأ static سوى أنها تتأثر بواسطة القيم left;right;top;bottom

ولكن إذا طبقت عليها إحدى القيم (مثلا top: 110px) فهي ستزاح 110 بكسل إلى الأسفل، ولكنها لن تدفع العنصر أسفلها او تزيحه من مكانه (مهما كانت قيمته) وأيضا لن تغير من ارتفاع او عرض الحاوي

رسم توضيحي:

مثال حي:

absolute

هذه الخاصية تختلف عن البقية حيث أنها لا يتم التأثير عليها من قبل اخوتها، بحيث أنها لا تتبع تسلسل مع اخوتها مثل static ويمكن وضعها في أي مكان في الحاوي عبر القيم left;right;top;bottom

ملاحظة: لكي تعمل الخاصية مع الحاوي الذي فوقها مباشرة، فعلى ذلك الحاوي أن يملك خاصية position: relative وإلا ستتمركز على الحاوي الذي فوقه وهكذا

رسم توضيحي:

مثال حي:

fixed

خاصية fixed تعمل تماما مثل خاصية absolute ولكنها لا تكترث للحاوي، وتعتبر الشاشة هي الحاوي أي تتمركز على نحوه

رسم توضيحي:

مثال حي:

(ملاحظة: جرب أن تنزل بالصفحة إلى الأسفل أو الأعلى لترى كيف يعمل العنصر)

sticky

هذه الخاصية جديدة ولا تعمل في المتصفحات كلها (حاليا فايرفوكس وسفاري فحسب)

وهي تجعل العنصر يتصرف على أنه relative ولكن عند خروجه من إطار الشاشة (أي عندما تعمل scroll وتتجاوزه) فيصبح العنصر يعمل كfixed ولكن في إطار الحاوي فحسب. لتفهمها فعليها عليك بهذا المثال، لكن استخدم متصفح firefox او سفاري بنسخة حديثة (دعم المتصفحات

المثال: