يمكن أن يكون الترتيب مخادع أحياناً ولكن كيف ؟؟؟
الترتيب positioning
تسمح لك خاصيات الترتيب المستخدمة في CSS في ترتيب العناصر . يمكن أيضاً استبدال عنصر بدلاً خلف عنصر آخر وتحديد ماسيحصل اذا كان العنصر كبيراً
يمكن ترتيب مكان العناصر من خلال خاصيات اليمين right واليسار left والأعلى top والأسفل bottom وبشكل عام لن تعمل هذه الخاصيات مالم يتم استخدام خاصية الترتيب position أولاً .
هناك أربع أنواع لأساليب الترتيب
1. الترتيب الجامد Static
تترتب عناصر HTML بشكل جامد افتراضياً ويتم تشكيل هذا الترتيب دائماً من خلال شكل الصفحة
لاتتأثر ترتيب العناصر من خلال خاصيات اليمين right واليسار left والأعلى top والأسفل bottom
2. الترتيب المثبت Fixed
جميع العناصر المرتبة بشكل ثابت لها علاقة بصفحة المتصفح
لن تتحرك مالم تتحرك نافذة المتصفح
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
ملاحظة : تدعم المتصفحات IE7 و IE8 الترتيب الثابت اذا تم تحديد نوع صفحة الويب !DOCTYPE
يتم ازالة العناصر المرتبة بشكل ثابت من التدفق العادي لهذا تعمل صفحة الويب وجميع العناصر على أن العناصر المثبتة غير موجودة
يمكن أن تتداخل العناصر المثبتة على العناصر الأخرى
3. الترتيب المتصل Relative
هو العنصر المتصل مع الترتيب الطبيعي للعنصر
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
ان محتوى العنصر المتصل يمكن أن ينتقل أو يتداخل مع العناصر الأخرى ولكن المساحة المتبقية للعنصر ماتزال محفوظة في الشكل الطبيعي
h2.pos_top
{
position:relative;
top:-50px;
}
4. الترتيب المطلق Absolute
ان الترتيب المطلق للعنصر يكون متصل مع العناصر الرئيسية التي بدورها ليست مرتبة بشكل جامد وان لم يتم ايجاد العناصر عندها الكتل المكونة هي <html>
h2
{
position:absolute;
left:100px;
top:150px;
}
يتم ازالة العناصر المثبتة بشكل مطلق من الشكل الطبيعي . ستصبح الصفحة والعناصر الرئيسية كما لو أن العناصر المطلقة غير موجودة
يمكن أن تتداخل العناصر المطلقة على العناصر الأخرى
تداخل العناصر
ان تم تحديد عنصر معين خارج الشكل الطبيعي لهذا يمكن أن تتداخل العناصر فيما بينها
تحدد خاصية z-index ترتيب العناصر المتراكمة (حيث يمكن ضبط العنصر في مقدمة أو خلف العناصر الأخرى)
يمكن للعنصر أن يرتب العناصر المتراكمة بقيم سلبية أو ايجابية
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
ان العنصر الذي يحتوي على ترتيب عالي يكون في مقدمة العنصر الذي يحتوي على ترتيب منخفض
ملاحظة: ان تداخل عنصران بدون استخدام خاصية z-index فإن عنصر HTML الذي تم ترتيبه في الآخر سيظهر في الأعلى
| الخاصية | الشرح | القيمة | CSS |
|---|---|---|---|
| bottom | ضبط الهوامش الخارجية السفلية لمكان الصندوق | auto length % inherit | 2 |
| clip | تثبيت مكان مطلق للعنصر | shape auto inherit | 2 |
| cursor | تحديد نوع مؤشر الماوس عند تمريرها فوق العنصر | url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help | 2 |
| left | ضبط الهوامش الخارجية اليسرى لمكان الصندوق | auto length % inherit | 2 |
| overflow | تحديد ماسيحدث في حال تمر التمرير فوق العنصر | auto hidden scroll visible inherit | 2 |
| position | تحديد نوع الترتيب للعنصر | absolute fixed relative static inherit | 2 |
| right | ضبط الهوامش الخارجية اليمنى لمكان الصندوق | auto length % inherit | 2 |
| top | ضبط الهوامش الخارجية العلوية لمكان الصندوق | auto length % inherit | 2 |
| z-index | ضبط ترتيب العنصر | number auto inherit | 2 |
ليست هناك تعليقات:
إرسال تعليق