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
.