تخطيط CSS - خاصية الموضع
تحدد الخاصية نوع طريقة positionتحديد الموضع المستخدمة لعنصر (ثابت ، نسبي ، ثابت ، مطلق أو ثابت).
خاصية المنصب
تحدد الخاصية نوع طريقة positionتحديد الموضع المستخدمة للعنصر.
هناك خمس قيم مختلفة للموضع:
staticrelativefixedabsolutesticky
ثم يتم وضع العناصر باستخدام الخصائص العلوية والسفلية واليسرى واليمنى. ومع ذلك ، لن تعمل هذه الخصائص ما لم position
يتم تعيين الخاصية أولاً. كما أنها تعمل بشكل مختلف بناءً على قيمة المركز.
الموقف: ثابت.
يتم وضع عناصر HTML ثابتة بشكل افتراضي.
لا تتأثر العناصر الثابتة المتوضعة بالخصائص العلوية والسفلية واليسرى واليمنى.
العنصر position: static;الذي لا يتم وضعه بأي طريقة خاصة ؛ يتم وضعه دائمًا وفقًا للتدفق الطبيعي للصفحة:
هنا هو CSS المستخدم:
مثال
div.static {
position: static;
border: 3px solid #73AD21;
}
الموقف: نسبي ؛
يتم وضع عنصر مع position: relative;نسبة إلى موضعه الطبيعي.
سيؤدي تعيين الخصائص العلوية واليمنى والسفلية واليسرى لعنصر تم وضعه نسبيًا إلى تعديله بعيدًا عن موضعه الطبيعي. لن يتم تعديل المحتوى الآخر ليناسب أي فجوة يتركها العنصر.
هنا هو CSS المستخدم:
مثال
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
الموقف: ثابت ؛
يتم وضع العنصر الذي يحتوي على عنصر position: fixed;بالنسبة إلى إطار العرض ، مما يعني أنه يظل دائمًا في نفس المكان حتى إذا تم تمرير الصفحة. يتم استخدام الخصائص العلوية واليمنى والسفلية واليسرى لتحديد موضع العنصر.
لا يترك العنصر الثابت فجوة في الصفحة حيث كان من الطبيعي أن يكون موجودًا.
لاحظ العنصر الثابت في الزاوية اليمنى السفلية من الصفحة. هنا هو CSS المستخدم:
مثال
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width:
300px;
border: 3px solid #73AD21;
}
position: fixed;الموقف: مطلق.
يتم وضع العنصر position: absolute;بالنسبة إلى أقرب سلف تم وضعه (بدلاً من وضعه بالنسبة إلى منفذ العرض ، مثل ثابت).
ومع ذلك؛ إذا لم يكن للعنصر المطلق الموضع أسلاف موضعية ، فإنه يستخدم نص المستند ، ويتحرك مع تمرير الصفحة.
ملاحظة: تتم إزالة العناصر المطلقة ذات المواضع من التدفق العادي ، ويمكن أن تتداخل مع العناصر.
اليك مثال بسيط:
هنا هو CSS المستخدم:
مثال
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;
}
الموقف: لزجة.
يتم وضع العنصر position: sticky;بناءً على موضع التمرير الخاص بالمستخدم.
يبدل العنصر اللاصق بين relativeو 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;
}
وضع النص في صورة
كيفية وضع النص فوق صورة:
مثال
جربها بنفسك:
مزيد من الأمثلة
This example demonstrates how to set the shape of an element. The element is clipped into this shape, and displayed.
All CSS Positioning Properties
| Property | Description |
|---|---|
| bottom | Sets the bottom margin edge for a positioned box |
| clip | Clips an absolutely positioned element |
| left | Sets the left margin edge for a positioned box |
| position | Specifies the type of positioning for an element |
| right | Sets the right margin edge for a positioned box |
| top | Sets the top margin edge for a positioned box |