في position تحدد الخاصية نوع من طريقة لتحديد المواقع المستخدمة لعنصر (ثابتة، نسبة ثابتة أو مطلقة).
الملكية الموقف
في position تحدد الخاصية نوع من طريقة لتحديد المواقع المستخدمة لعنصر.
هناك أربعة القيم موقف مختلف:
-
static -
relative -
fixed -
absolute
ثم يتم وضع العناصر باستخدام أعلى، أسفل، يسار، والخصائص الصحيحة. ومع ذلك، فإن هذه الخصائص لا تعمل إلا إذا كان position يتم تعيين الخاصية أولا. كما أنها تعمل بشكل مختلف تبعا لقيمة الموقف.
position: static;
يتم وضع عناصر HTML ثابت افتراضيا.
لا تتأثر العناصر وضع ثابت من أعلى، أسفل، يسار، والخصائص الصحيحة.
عنصر مع position: static; لا يتم وضع بأي شكل من الأشكال الخاصة؛ انها دائما وضع وفقا للالتدفق الطبيعي للصفحة:
هنا هو المغلق الذي يتم استخدامه:
position: relative;
عنصر مع position: relative; يتم وضع نسبة إلى وضعها الطبيعي.
ووضع الجزء العلوي، والحق، أسفل، وخصائص تبقى من عنصر وضع نسبيا يؤدي إلى تعديل بعيدا عن وضعها الطبيعي. لن يتم تعديل المحتويات الأخرى لتناسب أي فجوة بواسطة العنصر نقاط.
هنا هو المغلق الذي يتم استخدامه:
position: fixed;
عنصر مع position: fixed; يتم وضع نسبة إلى العرض، مما يعني أنه دائما يبقى في نفس المكان حتى إذا كانت الصفحة يتم تمريره. الجزء العلوي، والحق، وتستخدم أسفل، وخصائص اليسار إلى وضع العنصر.
وهناك عنصر ثابت لا يترك فجوة في الصفحة التي عادة قد يقع فيها.
لاحظ العنصر الثابت في الزاوية السفلية اليمنى من الصفحة. هنا هو المغلق الذي يتم استخدامه:
مثال
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width:
300px;
border: 3px solid #73AD21;
} انها محاولة لنفسك » position: absolute;
عنصر مع position: absolute; يتم وضع نسبة إلى السلف أقرب وضع (بدلا من قريب المتمركزة العرض، الثابتة مثل).
ومع ذلك؛ إذا عنصر وضع بشكل مطلق لا يوجد لديه الأجداد وضعه، فإنه يستخدم نص المستند، ويتحرك مع صفحة التمرير.
ملاحظة: هناك "positioned" عنصر واحد الذي هو موقف أي شيء ما عدا static .
هنا مثال بسيط:
هنا هو المغلق الذي يتم استخدامه:
مثال
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 -1، سيتم وضعها وراء النص.
عنصر مع قدر أكبر من النظام المكدس هو دائما أمام عنصر مع انخفاض أجل المكدس.
 | ملاحظة: إذا تداخلت عنصرين وضع دون z-index محدد، العنصر وضع الأخير في كود HTML سيتم عرضها على القمة. |
|---|
نص تحديد المواقع في صورة
كيفية وضع النص فوق صورة:
مثال
انها محاولة لنفسك:
أعلى اليسار » أعلى اليمين» أسفل اليسار » أسفل يمين» توسيط »
المزيد من الأمثلة
تعيين شكل عنصرا
يوضح هذا المثال كيفية تعيين شكل عنصر. يتم قص العنصر في هذا الشكل، وعرضها.
كيفية إظهار تجاوز في عنصر باستخدام التمرير
يوضح هذا المثال كيفية تعيين الخاصية تجاوز إلى إنشاء شريط التمرير عندما محتوى عنصر هو كبير جدا لاحتوائه في منطقة محددة.
كيفية تعيين متصفح للتعامل مع تجاوز تلقائيا
يوضح هذا المثال كيفية تعيين متصفح للتعامل مع تجاوز تلقائيا.
تغيير المؤشر
يوضح هذا المثال كيفية تغيير المؤشر.
اختبر نفسك مع تمارين!
التمرين 1 » التمرين 2» التمرين 3 » التمرين 4» التمرين 5 »
جميع خصائص CSS لتحديد المواقع
| الملكية | وصف |
|---|---|
| bottom | يحدد حافة الهامش السفلي لمربع وضعه |
| clip | مقاطع عنصر وضعه على الاطلاق |
| cursor | يحدد نوع المؤشر للظهور |
| left | يحدد حافة الهامش الأيسر لمربع وضعه |
| overflow | يحدد ماذا يحدث إذا كان المحتوى تجاوزات مربع عنصر ل |
| overflow-x | يحدد ما يجب القيام به مع اليسار حواف / يمين المحتوى إذا كان يفيض مجال المحتوى على العنصر |
| overflow-y | يحدد ما يجب القيام به مع الحواف العلوية / السفلية من المحتوى إذا كان يفيض مجال المحتوى على العنصر |
| position | يحدد نوع من المواقع لعنصر |
| right | يضع الحق في هامش حافة لمربع وضعه |
| top | تعيين الحافة العلوية هامش لمربع وضعه |
| z-index | يحدد ترتيب كومة من عنصر |