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

يتم ازالة العناصر المرتبة بشكل ثابت من التدفق العادي لهذا تعمل صفحة الويب وجميع العناصر على أن العناصر المثبتة غير موجودة

يمكن أن تتداخل العناصر المثبتة على العناصر الأخرى

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;
}

يتم ازالة العناصر المثبتة بشكل مطلق من الشكل الطبيعي . ستصبح الصفحة والعناصر الرئيسية كما لو أن العناصر المطلقة غير موجودة

يمكن أن تتداخل العناصر المطلقة على العناصر الأخرى

You may also like  [ دورة CSS ] الدروس المتقدمة CSS - الدرس الثامن - شريط القوائم navbar

تداخل العناصر

ان تم تحديد عنصر معين خارج الشكل الطبيعي لهذا يمكن أن تتداخل العناصر فيما بينها

تحدد خاصية 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




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

Scorpion

Welcome To The Biggest Site For Android Games And Apps You Can Find New Modded Games And Game Cheat & CrossFire Hacks You Can Find Daily Update Only Here Don’t Forget To Like Page in Facebook And Subscribe To Blog

Related Articles

Leave a Reply

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

Adblock Detected

Please consider supporting us by disabling your ad blocker