القائمة الرئيسية

الصفحات

شرح css | دورة CSS كاملة | #12 : تعلم كيفية التحكم بأوضاع العنصر عن طريق Position - fixed - absolude

 

تخطيط CSS - خاصية الموضع



و positionيحدد الملكية نوع من المواقع الطريقة المستخدمة لعنصر (ثابت أو قريب، الثابتة والمطلقة أو لزجة).


خاصية المنصب

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

هناك خمس قيم مختلفة للموضع:

  • static
  • relative
  • fixed
  • absolute
  • sticky

ثم يتم وضع العناصر باستخدام الخصائص العلوية والسفلية واليسرى واليمنى. ومع ذلك ، لن تعمل هذه الخصائص ما لم position يتم تعيين الخاصية أولاً. كما أنها تعمل بشكل مختلف بناءً على قيمة المركز.


الموقف: ثابت.

يتم وضع عناصر HTML ثابتة بشكل افتراضي.

لا تتأثر العناصر الثابتة الموضوعة بالخصائص العلوية والسفلية واليسرى واليمنى.

العنصر الذي position: static;لا يتم وضعه بأي طريقة خاصة ؛ يتم وضعه دائمًا وفقًا للتدفق الطبيعي للصفحة:

عنصر <div> هذا له موقع: ثابت ؛

هنا هو CSS المستخدم:

مثال

div.static {
  position: static;
  border: 3px solid #73AD21;
}
جربها بنفسك "

الموقف: نسبي ؛

يتم وضع عنصر مع position: relative;نسبة إلى موضعه الطبيعي.

سيؤدي تعيين الخصائص العلوية واليمنى والسفلية واليسرى لعنصر ذي موضع نسبيًا إلى تعديله بعيدًا عن موضعه الطبيعي. لن يتم تعديل المحتوى الآخر ليناسب أي فجوة يتركها العنصر.

عنصر <div> هذا له موقع: نسبي ؛

هنا هو 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;
}
جربها بنفسك "
عنصر <div> هذا position: fixed;

الموقف: مطلق.

يتم وضع عنصر مع position: absolute;نسبة إلى أقرب سلف تم وضعه (بدلاً من وضعه بالنسبة إلى منفذ العرض ، مثل ثابت).

ومع ذلك؛ إذا لم يكن للعنصر المطلق الموضع أسلاف موضعية ، فإنه يستخدم نص المستند ، ويتحرك مع تمرير الصفحة.

ملاحظة: العنصر "الموضع" هو العنصر الذي يكون موضعه أي شيء باستثناء static.

اليك مثال بسيط:

عنصر <div> هذا له موقع: نسبي ؛
عنصر <div> هذا له موقع: مطلق ؛

هنا هو 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;
}
جربها بنفسك "

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

عندما يتم وضع العناصر ، يمكن أن تتداخل مع عناصر أخرى.

و z-indexتحدد الخاصية ترتيب كومة من عنصر (والتي يجب أن توضع عنصر أمام أو خلف، وغيرها).

يمكن أن يكون للعنصر ترتيب مكدس موجب أو سلبي:

هذا عنوان

نظرًا لأن الصورة تحتوي على مؤشر z -1 ، فسيتم وضعها خلف النص.

مثال

img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}
جربها بنفسك "

يكون العنصر الذي يحتوي على ترتيب مكدس أكبر دائمًا أمام عنصر ذي ترتيب مكدس أقل.

ملاحظة: إذا تداخل عنصران تم وضعهما بدون z-index تحديد ، فسيتم عرض العنصر الذي تم وضعه أخيرًا في كود HTML في الأعلى.


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

كيفية وضع النص فوق صورة:

مثال

Cinque Terre
Bottom Left
Top Left
Top Right
Bottom Right
Centered

جربها بنفسك:

أعلى اليسار " فوق على اليمين " أسفل اليسار " أسفل اليمين » توسيط »

مزيد من الأمثلة

تعيين شكل عنصر
يوضح هذا المثال كيفية تعيين شكل العنصر. يتم قطع العنصر في هذا الشكل ، ويتم عرضه.



جميع خصائص تحديد المواقع في CSS

PropertyDescription
bottomSets the bottom margin edge for a positioned box
clipClips an absolutely positioned element
leftSets the left margin edge for a positioned box
positionSpecifies the type of positioning for an element
rightSets the right margin edge for a positioned box
topSets the top margin edge for a positioned box
z-indexSets the stack order of an element






تعليقات

التنقل السريع