تحدد خاصية الموقع (position) نوع طريقة التموضع المستخدمة لعنصر ( ثابت [static]، نسبي [relative]، ثابت تمامًا [fixed]، مطلق [absolute]، أو لصيق [sticky]).
خاصية الموقع
تحدد خاصية الموقع (position) نوع طريقة التموضع المستخدمة لعنصر.
هناك خمس قيم مختلفة للموقع:
- ثابت (static)
- نسبي (relative)
- ثابت تمامًا (fixed)
- مطلق (absolute)
- لصيق (sticky)
يتم بعد ذلك تحديد موقع العناصر باستخدام خصائص الأعلى، الأسفل، اليسار، واليمين. ومع ذلك، لن تعمل هذه الخصائص ما لم يتم تعيين خاصية الموقع (position) أولاً. كما أنها تعمل بشكل مختلف اعتمادًا على قيمة الموقع.
position: static;
يتم تموضع عناصر HTML بشكل ثابت (static) بشكل افتراضي.
لا تتأثر العناصر ذات الوضع الثابت (static) بالخصائص العلوى، والأسفل، واليسار، واليمين.
لا يتم وضع العنصر الذي يحتوي على position: static; بطريقة خاصة؛ يتم وضعه دائمًا وفقًا للترتيب الطبيعي للصفحة:
div.static {
position: static;
border: 3px solid #73AD21;
}
position: relative;
يتم وضع العنصر الذي يحتوي على position: relative; بالنسبة لموضعه الطبيعي.
سيؤدي تعيين الخصائص العلوى، واليمين، والأسفل، واليسار لعنصر ذي موضع نسبي (relative) إلى تعديله بعيدًا عن موضعيه الطبيعي. لن يتم تعديل المحتوى الآخر ليلائم أي فجوة تركها العنصر.
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
position: fixed;
يتم وضع العنصر الذي يحتوي على position: fixed; بالنسبة لمنطقة العرض (viewport)، مما يعني أنه يظل دائمًا في نفس المكان حتى في حالة تمرير الصفحة. يتم استخدام الخصائص العلوى، واليمين، والأسفل، واليسار لتحديد موقع العنصر.
لا يترك العنصر الثابت (fixed) فجوة في الصفحة حيث كان من المفترض أن يكون موجودًا.
لاحظ العنصر الثابت في الركن الأيمن السفلي من الصفحة. إليك رمز CSS المستخدم:
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
position: absolute;
يتم وضع العنصر الذي يحتوي على position: absolute; بالنسبة إلى أقرب سلف ذي موضع (بدلاً من وضعه بالنسبة لمنطقة العرض، مثل الثابت).
ومع ذلك؛ إذا كان العنصر ذو الموضع المطلق (absolute) يفتقر إلى أسلاف ذوي موضع، فإنه يستخدم جسم المستند (document body)، ويتحرك مع تمرير الصفحة.
ملاحظة: يتم إزالة العناصر ذات الموضع المطلق (absolute) من التدفق الطبيعي، ويمكن أن تتداخل مع العناصر الأخرى.
فيما يلي مثال بسيط:
يحتوي عنصر <div> هذا على position: relative;
يحتوي عنصر <div> هذا على position: absolute;
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21
position: sticky;
يتم وضع العنصر الذي يحتوي على position: sticky; بناءً على موضع تمرير المستخدم.
يتبدل العنصر اللزج (sticky) بين relative و fixed، اعتمادًا على موضع التمرير. يتم وضعه بشكل نسبي حتى يتم الوصول إلى موضع إزاحة معين في منطقة العرض – ثم “يلتصق” في مكانه (مثل position:fixed).
ملاحظة: لا يدعم Internet Explorer التموضع اللزج. تتطلب Safari بادئة -webkit- (انظر المثال أدناه). يجب عليك أيضًا تحديد واحد على الأقل من top، right، bottom أو left لكي يعمل التموضع اللزج.
في هذا المثال، يلتصق العنصر اللزج بأعلى الصفحة (top: 0) عند الوصول إلى موضع التمرير الخاص به.
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
وضع النص في صورة
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.topleft {
position: absolute;
top: 8px;
left: 16px;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<h2>Image Text</h2>
<p>Add some text to an image in the top left corner:</p>
<div class="container">
<img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<div class="topleft">Top Left</div>
</div>
</body>
</html>
