بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
1)الوضعية النسبية position relative .
2)الوضعية المطلقة position absolute .
3)الوضعية الثابتة position fixed .
والخاصية المستخدمة للتحكم في الوضعيات هي :
الخاصية position : تأخذ القيمة relative أو absolute أو fixed لتحديد نوع الوضعية وبعدها تستخدم الخصائص top أو bottom مع right أو left لتحديد مكان التموضع في الصفحة ، تستخدم فقط واحدة ، أو إثنتين إحداهما تحدد المكان عموديا والأخرى تحدده أفقيا.
شرح الوضعية النسبية
position relative
إليكم كود html التالي:
كعادتنا في البداية سنقوم بعمل تنسيقات عادية ، وهذه هي مع النتيجة:
والآن سنضع خاصية position للصورة :
كما ترى الصورة تحركت من مكانها تاركة الأعلى top بمقدار 50px وتاركة اليسار left بمقدار 100px ، نستنتج من هذا أن هذه الوضعية relative نسبة إلى العناصر المحيطة بها ، كما أن المكان الذي تركته سيبقى شاغرا محسوبا عليها ، أما ظهور الصورة فوق الديف الأخضر فلأن الوضعيات عموما تظهر فوق العناصر الأخرى لذا توجد خاصية أخرى هي z-index لترتيب الظهور .
خاصية z-index : تأخذ قيمة رقمية من الأعداد الصحيحة بالسالب أو الموجب ، فقط للترتيب لأن العنصر الذي يأخذ قيمة أعلى في z-index هو الذي يظهر فوق الآخر الذي يأخذ قيمة أقل.
سنجرب ذلك مع الصورة والديف الأخضر وسوف نرى:
وكما ترى هذه المرة الطبقة الأعلى هي الديف الأخضر.
شرح الوضعية المطلقة
position absolute
الوضعية المطلقة تسمح للعنصر بأن يأخذ حريته في الظهور ، بحيث يترك مكانه الأصلي للعناصر القريبة ويحتل هو مكانا مطلقا في الصفحة ، وهو في وضعيته الجديدة لا علاقة له بالعناصر المحيطة به لأنه يأخذ وضعه الجديد نسبة للصفحة ككل ، إلا في حالة واحدة عندما تكون الوضعية نسبية عند العنصر الأب ومطلقة عند العنصر الإبن فإن الأخير في هذه الحالة يتحرك بكل حرية ضمن نطاق العنصر الأب.
ليكن نفس كود html السابق مع التنسيق التالي:
وكما ترى الصورة هذه المرة أخذت مقدار 50px بالنسبة لأعلى الصفحة وليس الديف الأخضر كما رأينا في السابق ، فالوضعية absolute هنا لا علاقة لها بالعناصر المحيطة حتى أن الديف الثاني أخذ مكان الصورة واعتبرها غير موجودة .
سنوضح شيئا آخر في المثال التالي:
الديف article يعتبر أب parent بالنسبة ل img والفقرات p ، لذا سنجعل الوضعية نسبية للديف الأب وسنجعلها مطلقة للصورة ثم نحرك الصورة ، وستأخذ الصورة الأبعاد نسبة للعنصر الذي يحتويها .
سنضع التنسيق التالي:
والنتيجة:
تنسيق آخر:
والنتيجة:
نكتفي بهذا القدر ، وموعدنا في الدرس القادم مع الوضعية الثابتة ، وفي انتظار ذلك دمتم في رعاية الله وحفظه.