More

[ دورة CSS ] الدروس المتقدمة CSS – الدرس الرابع – ترتيب العناصر positioning

" Here you can search for everything you want and you will find it as soon as possible "
يمكن أن يكون الترتيب مخادع أحياناً ولكن كيف ؟؟؟


الترتيب 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
يتم ازالة العناصر المرتبة بشكل ثابت من التدفق العادي لهذا تعمل صفحة الويب وجميع العناصر على أن العناصر المثبتة غير موجودة
يمكن أن تتداخل العناصر المثبتة على العناصر الأخرى

Click Here To Download 

3. الترتيب المتصل Relative

هو العنصر المتصل مع الترتيب الطبيعي للعنصر

Click Here To Download 
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}

ان محتوى العنصر المتصل يمكن أن ينتقل أو يتداخل مع العناصر الأخرى ولكن المساحة المتبقية للعنصر ماتزال محفوظة في الشكل الطبيعي

h2.pos_top
{
position:relative;
top:-50px;
}

4. الترتيب المطلق Absolute

ان الترتيب المطلق للعنصر يكون متصل مع العناصر الرئيسية التي بدورها ليست مرتبة بشكل جامد وان لم يتم ايجاد العناصر عندها الكتل المكونة هي <html>

Click Here To Download 
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

Show More
" Here you can search for everything you want and you will find it as soon as possible "

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Check Also

Close

Adblock Detected

Please consider supporting us by disabling your ad blocker