زكرياء الزحتي
position هذه الخاصية لها دور مهم جدا في تصميم صفحات الويب, ﻷنها تمكننا من تحريك عناصر html ووضعها في مكان نريد وذالك بكل سهولة, فقط نحدد لها القيمة ونضيف لها خصائص التحريك ك left و right و top و bottom و هذه الخصائص تعمل فقط مع الخاصية position, لهذا من ضروري جدا استعمالهم معا, وأيضا هناك بعض الخصائص التي لا تعمل إلا بوجود الخاصية position كالخاصية z-index المهم جدا أيضا.
في هذه المقالة سنتطرق لكل ما يتتعلق بالخاصية position من شروحاتها وطريقة استخدامها, فقط قم بالتركيز معي, ﻷن عند احترافك لهذه الخاصية ستتمكن من جعل تصاميمك احترافية جدا.
هذه الخاصية تقبل 7 قيم فقط وهي static, relative, fixed, absolute, sticky, باﻹضافة إلى القيمتين initial و inherit الّلتان يأتين مع أي خاصية في CSS, سنرى شرح بعض قيمها وأيضا أمتلثها.
القيمة static:
هذه القيمة هي القيمة الافتراضية لكل عنصر جديد يتم إنشائه في الصفحة, يعني سواء قمنا بتعين القيمة static أو لم نقم بتعيينها فإنها لن تحدث أي فرق, وأيضا الخاصيات left, top, right, bottom, لا يعملن عليها, وهي مثل القيمة initial بالضبط, يعني قيمة افتراضية.
مثال:
الشفرة:
<html>
<head>
<meta charset="utf-8" />
<title>مدونة عبقور</title>
<style>
.static{
position: static;
top: 5px;
left: 25px;
}
.bg-orange{
background-color: orange;
color: #fff;
}
.bg-blue{
background-color: blue;
color: #fff;
}
.bg-red{
background-color: red;
color: #fff;
}
.bg-green{
background-color: green;
color: #fff;
}
</style>
</head>
<body>
<div class="bg-red">مدونة عبقور</div>
<div class="static bg-orange">
www.ab9or.com
</div>
<div class="bg-blue">مدونة عبقور</div>
<div class="bg-green">مدونة عبقور</div>
</body>مثال حي:
See the Pen www.ab9or.com – css – position: static; by ab9orcom (@ab9orcom) on CodePen.
كما نرى في المثال أعلاه, عندما قمنا بتعيين الخاصيات left و top لم يشتغلو على العنصر بلون البرتقالي, يعني سواء كانت أو لم تكن فهذا لا يحدث فرق.
ملاحظة: أيضا الخاصية z-index لا تعمل عندما تكون القيمة static.
القيمة relative:
القيمة relative تعني الوضعية النسبية تسمح لنا بتحريك أي عنصر نسبيا بدون تأثير على عناصر أخرى, وتتم عمليه تحريكه عبر الخاصية left, top, right, bottom, و في غالب اﻷحيان نستعمله في تحريك العناصر للمكان قريب.
مثال:
الشفرة:
<html>
<head>
<meta charset="utf-8" />
<title>مدونة عبقور</title>
<style>
.relative{
position: relative;
top: 5px;
left: 25px;
}
.bg-orange{
background-color: orange;
color: #fff;
}
.bg-blue{
background-color: blue;
color: #fff;
}
.bg-red{
background-color: red;
color: #fff;
}
.bg-green{
background-color: green;
color: #fff;
}
</style>
</head>
<body>
<div class="bg-red">مدونة عبقور</div>
<div class="relative bg-orange">
www.ab9or.com
</div>
<div class="bg-blue">مدونة عبقور</div>
<div class="bg-green">مدونة عبقور</div>
</body>مثال حي:
See the Pen www.ab9or.com – css – position: relative; by ab9orcom (@ab9orcom) on CodePen.
كما نرى في المثال أعلاه عندما قمنا بتغيير قيمة الخاصية left و top للعنصر الملون بالبرتقالي هو الوحيد الذي تغير أما العناصر اﻷخرى لم تتغير حالتها.
القيمة absolute:
القيمة absolute تعني الوضعية المطلقة وهي تسمح لنا بوضع العنصر في أي مكان نريد داخل اﻷب الحاوي للعنصر والذي تكون قيمته relative أو fixed أو absolute, وهو لا يتأثر بالعناصر الأخرى ويحدد مكانة بالصفحة أو داخل أي عنصر بشكل مستقل.
مثال:
الشفرة:
<html>
<head>
<meta charset="utf-8" />
<title>مدونة عبقور</title>
<style>
body{
margin: 0;
}
div{
width: 200px;
height: 100px;
}
p{
margin: 0;
}
.relative{
position: relative;
}
.absolute{
position: absolute;
bottom: 10px;
right: 10px;
}
.bg-orange{
background-color: orange;
color: black;
}
.bg-blue{
background-color: blue;
color: #fff;
}
</style>
</head>
<body>
<div class="bg-blue">
<p>مدونة عبقور</p>
</div>
<div class="bg-orange relative">
<p class="absolute">www.ab9or.com</p>
</div>
</body>مثال حي:
See the Pen www.ab9or.com – css – position: absolute; by ab9orcom (@ab9orcom) on CodePen.
كما نرى في المثال أعلاه, قمنا بإعطاء القيمة relative ﻷب العنصر absolute, وهذا سيجعل العنصر absolute داخل العنصر relative.
وإذا لم نعطي القيمة relative لأب العنصر absolute في فستبدأ من أعلى الصفحة وليس من اﻷب.
القيمة fixed:
القيمة fixed تعني الوضعية الثابتة وهي تسمح لنا بوضع العنصر في أي مكان نريد في الصفحة, وهي تعمل نسبيا مع نافذة (window) المتصفح وليس document يعني هي اﻷب أو الحاوي لها وهي عكس القيمة absolute, و لا يتاثر بالعناصر الأخرى ويحدد مكانه بإحداثيات نافذة المتصفح الحقيقة.
لكي نفهم أكثر, عندما نحدد الخاصية left أو top أو right أو bottom, فستبدأ الحساب من window وليس من عنصر اﻷب كما رأينا في القيمة absolute, يعني يمكنك أن تضع العناصر في أي مكان تريد في الصفحة.
مثال:
الشفرة:
<html>
<head>
<meta charset="utf-8" />
<title>مدونة عبقور</title>
<style>
body{
margin: 0;
}
div{
width: 200px;
height: 100px;
}
p{
margin: 0;
}
.fixed{
position: fixed;
top: 10px;
left: 10px;
}
.bg-orange{
background-color: orange;
color: black;
}
.bg-blue{
background-color: blue;
color: #fff;
}
</style>
</head>
<body>
<div class="bg-blue">
<p>مدونة عبقور</p>
</div>
<div class="bg-orange">
<p class="fixed">www.ab9or.com</p>
</div>
</body>مثال حي:
See the Pen www.ab9or.com – css – position: fixed; by ab9orcom (@ab9orcom) on CodePen.
في المثال أعلاه, قمنا بإنشاء عنصر div و بداخله عنصر p بإسم (مدونة عبقور), وأيضا قمنا بإنشاء عنصر div أخر وبداخله عنصر p بإسم (www.ab9or.com) وأعطيناه القيمة fixed, وكما نرى بعد تحديد left و top للقيمة fixed لقد تم تحريك النص للأعلى يعني تم الحساب من أول الصفحة, ﻷن window تعتبر هي اﻷب أو الحاوي للعنصر p.
