CSS 布局 - position 属性

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

position 属性

position 属性规定应用于元素的定位方法的类型。

有五个不同的位置值：

  • static
  • relative
  • fixed
  • absolute
  • sticky

元素其实是使用 top、bottom、left 和 right 属性定位的。但是，除非首先设置了 position 属性，否则这些属性将不起作用。根据不同的 position 值，它们的工作方式也不同。

position: static;

HTML 元素默认情况下的定位方式为 static（静态）。

静态定位的元素不受 top、bottom、left 和 right 属性的影响。

position: static; 的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位：

这个 <div> 元素设置了 position: static;

这是所用的 CSS：

مثال

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

جرب بنفسك

position: relative;

position: relative; 的元素相对于其正常位置进行定位。

设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。

这个 <div> 元素设置了 position: relative;

这是所用的 CSS：

مثال

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

جرب بنفسك

position: fixed;

position: fixed; 的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。

固定定位的元素不会在页面中通常应放置的位置上留出空隙。

请注意页面右下角的这个固定元素。这是所用的 CSS：

مثال

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

جرب بنفسك

这个 <div> 元素设置了 position: fixed;

position: absolute;

position: absolute; 的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。

然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。

ملاحظة:“被定位的”元素是其位置除 static 以外的任何元素。

这是一个简单的例子：

这个 <div> 元素设置了 position: relative;
这个 <div> 元素设置了 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;

position: sticky; العناصر تُحدد بناءً على موقع التمرير للمستخدم.

العناصر الملتصقة تُحدد بناءً على موقع التمرير للعناصر في النسق (relativeوالمحدد (fixedبينها التبديل. في البداية سيكون التوجيه نسبيًا، حتى يلتقي في viewport بموقع التحرير المحدد - ثم يتم ‘الصاقه’ في الموقع المناسب (مثل position:fixed).

ملاحظة:Internet Explorer،Edge 15 وأحدث إصداراتها لا تدعم التوجيه الملتصق. يحتاج 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-index للصورة هو -1، فإنها تقع خلف النص.

مثال

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

جرب بنفسك

العناصر ذات التسلسل الارتفاع العالي دائمًا تظهر قبل العناصر ذات التسلسل الارتفاع المنخفض.

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

توجيه النص داخل الصورة

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

مثال

LogoCodeW3C.com
الجزء السفلي الأيسر
الجزء العلوي الأيسر
الجزء العلوي الأيمن
الجزء السفلي الأيمن
مركز

جرب بنفسك:

الجزء العلوي الأيسر الجزء العلوي الأيمن الجزء السفلي الأيسر الجزء السفلي الأيمن مركز

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

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

جميع خصائص التوجيه في CSS

الخصائص الوصف
bottom تحديد حافة الهوامش السفلية للصندوق المحدد الموقع.
clip Cuts the element with absolute positioning.
left Set the left margin edge of the positioning box.
position Specify the positioning type of the element.
right Set the right margin edge of the positioning box.
top Set the top margin edge of the positioning box.
z-index Set the stacking order of elements.

Extended reading

课外书：CSS positioning overview

课外书：CSS relative positioning

课外书：CSS absolute positioning