تقديم مجموعة من الشروحات والمواضيع التي تهم بالحاسوب والانترنت من حيث الاستخدام والانشاء والتصميم والحماية، مع الاهتمام بمدونات بلوجر ومواقع التواصل الاجتماعي خصوصا فيسبوك وتويتر

النشرة البريدية @

خصائص تعويم العناصر ووضعية العناصر والطبقات

دروس، شرح، طريقة، بلوجر

تحتوي هذه المقالة على ما يلي

أهلا و سهلا بكم من جديد، 
ارتباطا بدرس نموذج الصندوق في CSS، سنتعرف اليوم عن المجموعة أخرى من الخصائص التي تتحكم في نموذج الصندوق في CSS، سنتعرف على خاصية الحاشية float، و خاصية clear للتحكم بالعناصر اللاحقة بالعناصر العائمة، وخاصية position، وسنتعلم كيف تجعل عناصر مختلفة متداخلة ونضع بعضها فوق في طبقات باستخدام خاصية z-index.

خاصية تعويم العناصر  float وخاصية clear

الخاصية  float

الخاصية  float يمكن أن تحمل القيمة left أو right أو none.
float:left;
العناصر يمكن تعويمها إلى اليمين أو اليسار باستخدام الخاصية float، هذا يعني أن الصندوق ومحتوياته ستعوم إلى اليمين أو اليسار من الصفحة، أو من ستعوم إلى إحدى الجهتين ضمن عنصر صندوق آخر، المثال التالي يوضح مبدأ تعويم العناصر:

الخاصية  clear

خاصية clear تستخدم للتحكم بوضعية العناصر اللاحقة لأي عنصر الصفحة تم تعويمه.
تلقائياً العناصر اللاحقة تحرك لتغطي المساحة حول العنصر الذي تم تعويمه، الخاصية clear يمكنها أن تحمل القيمة left أو right أو both أو none، المبدأ هنا إذا وضعنا لخاصية clear قيمة "both" مثلاً فإن الحاشية العلوية للعنصر ستصبح أسفل الحاشية السفلية لعنصر يعلوه. إذا لم ترغب في أن يلتف النص حول الصورة يمكنك إضافة هذه الخاصية
clear:both;

خصائص وضعية العناصر

باستخدام وضعية العناصر يمكن أن تضع أي عنصر (صندوق) في المكان الذي تريده من الصفحة على أساس إحداثيات ونظام محدد.ويمكن لتعويم العناصر أن يساعدك على فعل ذلك أيضاً.

الخصائص الأساسية

مبدأ وضعية العناصر في CSS هو أنك تستطيع وضع أي صندوق
top: 100px;
left: 200px;

خاصية position

وضعية العناصر المطلقة

أي عنصر وضع بشكل مطلق لا يأخذ مساحة في الصفحة، هذا يعني أنه لا يترك فراغاً بعد أن يوضع بشكل مطلق.
لوضع أي عنصر بشكل مطلق، نضع الخاصية position ونعطيها القيمة absolute، ويمكن أيضاً استخدام الخصائص left  وright  وtop  وbottom  لتحديد وضعية الصندوق.
position:absolute;

وضعية العناصر النسبية

وضعية العنصر النسبية تحسب على أساس وضعه الأصلي في الصفحة، هذا يعني أنك إذا حركت العناصر إلى اليمين أو اليسار أو الأعلى أو الأسفل فإنه سيأخذ مساحة من النص بعد وضعه في مكانه المحدد. الاختلاف بين الوضعية النسبية والمطلقة هي كيفية التعامل مع وضع العنصر نفسه.
لوضع العناصر بشكل نسبي، نضع الخاصية position ونعطيها القيمة relative
position:relative;
الخاصية position يمكن أن نعطيها 4 قيم:
position: fixed;
position: relative;
position: absolute;
position: static;

خاصية طبقة فوق طبقة باستخدام  z-index

سنتعلم كيف تجعل عناصر مختلفة متداخلة ونضع بعضها فوق في طبقات باستخدام layers، هذا يعني ترتيب العناصر لكي نضع بعضها فوق بعض. لهذا الغرض يمكنك أن تعطي لعنصر ما رقم (z-index)، وهذا الخاصية تسمح للعناصر ذات الرقم الأعلى بأن تكون فوق العناصر التي ذات الرقم الأدنى.
z-index: 1;
خاصية طبقة فوق طبقة باستخدام  z-index

ليست هناك تعليقات :

أضف تعليق