شرح position في CSS | أساسيات CSS

 شرح Position CSS

باستخدام سمة position، يمكنك تحديد نوع موقع العنصر. في هذا الدرس، سوف نشير إلى أنواع القيم التي يمكن استخدامها لسمة position والتعرف على وظيفتها.


خصائص position

باستخدام سمة position، يمكنك تحديد موقع العنصر.

القيم الأربع المختلفة التي يمكن أن تحتوي عليها هذه السمة هي:


 ● static 
 ● relative 
 ● fixed 
 ● absolute   

بعد تعيين سمة position، يمكنك استخدام سمات اليسار والأسفل والأعلى واليمين لتحديد موقع العنصر. تعمل هذه السمات إذا تمت تهيئة سمة position واعتمادًا على القيمة التي يتم أخذها في الاعتبار لسمة position، فإن السمات المذكورة لها وظائف مختلفة.


Position: static

قيمة position الافتراضية لجميع عناصر HTML ثابتة.

عندما تحتوي سمة  position على قيمة ثابتة، لن يكون للسمات left، و bottom، و top، و right أي تأثير.

عنصر ذو قيمة ;position: static سواء أعلنا عن ذلك أم لا، يتم وضع العناصر بترتيب عادي على صفحة الويب.


عنصر <div> هذا له القيمة ;position: static.


يوضح المثال التالي كيفية استخدام القيمة position: static (بالطبع، كما ذكرنا سابقًا، static هو القيمة الافتراضية ولا يحتاج إلى تعيين):


div.static {
position: static;
border: 3px solid #73AD21;
}

position: relative

عندما تقوم بتعيين position بالنسبة لعنصر ما، بدون إضافة أي سمات تحديد موضع أخرى (left، bottom،top، و right) لن يحدث شيء. عندما تضيف موضعًا إضافيًا بعيدًا عن النسبي، مثل left: 30px، يتحرك العنصر بمقدار 30 بكسل إلى اليمين من موضعه الطبيعي. هنا، يمكنك أن ترى أن هذا العنصر متعلق بنفسه. عندما يتحرك العنصر، لن يتأثر أي عنصر آخر في التخطيط.


هناك شيء يجب أن تضعه في اعتبارك أثناء تعيين الموضع - بالنسبة للعنصر، يحد من نطاق العناصر الفرعية الموضوعة بشكل مطلق. هذا يعني أن أي عنصر يكون تابعًا لهذا العنصر يمكن وضعه بشكل relative داخل هذه block.


عنصر <div> هذا له القيمة  ;position: relative.


يوضح المثال التالي كيفية استخدام القيمة relative لسمة position:

div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}

position: fixed

عنصر بالقيمة ;position: fixed يتم وضعه بالنسبة للشاشة. وهذا يعني أن العنصر المعني دائمًا ما يكون في مكان ثابت، وحتى إذا تم تمرير الصفحة، فسيظل مكانه.

في هذا النوع من تحديد المواقع، يتم استخدام السمات left، bottom،top، و right لتحديد الموقع المطلوب.

السمات ذات المواضع fixed  لا تشغل مساحة في موقعها السابق.

يوضح المثال التالي كيفية استخدام قيمة fixed:

div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}

position: absolute

عنصر بالقيمة ;position: absolute سيبقى العنصر في التدفق الطبيعي للصفحة.

ومع ذلك، إذا كان العنصر الذي تم تعيينه على قيمة ;position: absolute لا يحتوي على عنصر أصلي، فسيتم نقله بالنسبة إلى العنصر الأساسي في الصفحة أثناء تمريره.

يوضح المثال التالي كيفية استخدام القيمة  absolute:

div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}

div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}

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

عندما يتم وضع العناصر، أو بعبارة أخرى، يتم تعيين قيمة سمة الموضع على قيمة أخرى غير ثابتة، يمكن أن تتداخل العناصر.

باستخدام سمة z-index، يمكن تحديد ترتيب العناصر المتداخلة على بعضها البعض. يمكن تعيين سمة z-index بقيم موجبة وسالبة. كلما زادت قيمة z-index للعنصر عن العناصر الأخرى، زادت أولوية هذا العنصر.

img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}

وضع نصوص في صورة

يوضح كل من الأمثلة التالية كيفية وضع النص في اتجاه معين في صورة ما:

أعلى اليسار:

.container {
position: relative;
}

.topleft {
position: absolute;
top: 8px;
left: 16px;
font-size: 18px;
}

اعلى اليمين:

.container {
position: relative;
}

.topright {
position: absolute;
top: 8px;
right: 16px;
font-size: 18px;
}

أسفل اليسار:

.container {
position: relative;
}

.bottomleft {
position: absolute;
bottom: 8px;
left: 16px;
font-size: 18px;
}
أسفل اليمين:
.container {
position: relative;
}

.bottomright {
position: absolute;
bottom: 8px;
right: 16px;
font-size: 18px;
}

الوسط:

.container {
position: relative;
}

.center {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
font-size: 18px;
}


كلمات مفتاحية: