Header Ads

ترتيب العناصر positioning



يمكن أن يكون الترتيب مخادع أحياناً ولكن كيف ؟؟؟



الترتيب 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 الذي تم ترتيبه في الآخر سيظهر في الأعلى





جميع خصائص ترتيب العناصر positioning
الخاصيةالشرحالقيمة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


يتم التشغيل بواسطة Blogger.