الفرق بين المراجعتين ل"CSS/bottom"
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}') |
|||
سطر 147: | سطر 147: | ||
* مسودة [https://drafts.csswg.org/css-transitions/#animatable-css CSS Transitions]. | * مسودة [https://drafts.csswg.org/css-transitions/#animatable-css CSS Transitions]. | ||
* مواصفة [http://www.w3.org/TR/CSS2/visuren.html#choose-position CSS Level 2 (Revision 1)]. | * مواصفة [http://www.w3.org/TR/CSS2/visuren.html#choose-position CSS Level 2 (Revision 1)]. | ||
− | [[تصنيف:CSS]] | + | [[تصنيف:CSS|{{SUBPAGENAME}}]] |
− | [[تصنيف:CSS Property]] | + | [[تصنيف:CSS Property|{{SUBPAGENAME}}]] |
− | [[تصنيف:CSS Positioning]] | + | [[تصنيف:CSS Positioning|{{SUBPAGENAME}}]] |
مراجعة 15:34، 28 يناير 2018
الخاصية bottom
في CSS تساهم في تحديد الموضع الرأسي لأحد العناصر التي يمكن أن يتغير مكانها (positioned elements)، وليس لهذه الخاصية تأثير في العناصر التي لا يمكن أن يتغير مكانها (non-positioned elements).
/* <length> قيم */
bottom: 3px;
bottom: 2.4em;
/* <percentages> قيم نسبية */
/* تؤخذ نسبةً إلى ارتفاع الكتلة الحاوية للعنصر */
bottom: 10%;
/* كلمة محجوزة */
bottom: auto;
/* القيم العامة */
bottom: inherit;
bottom: initial;
bottom: unset;
تأثير الخاصية bottom
يعتمد على قيمة الخاصية position
:
- عندما تُضبَط الخاصية
position
إلى القيمةabsolute
أوfixed
، فستُحدِّد الخاصيةbottom
المسافة بين الحافة السفلية للعنصر وبين الحافة السفلية للكتلة الحاوية له (containing block). - عندما تُضبَط الخاصية
position
إلىrelative
، فستُحدِّد الخاصيةbottom
المسافة التي ستنتقل وفقها الحافة السفلية للعنصر فوق مكانها الطبيعي. - عندما تُضبَط الخاصية
position
إلىsticky
، فستعمل الخاصيةbottom
كما لو أنَّ موضع العنصرrelative
عندما يكون ظاهرًا ضمن إطار العرض (viewport)، وستعمل كما لو أنَّهfixed
عندما لا يكون ظاهرًا ضمن إطار العرض. - عندما تُضبَط الخاصية
position
إلىstatic
(أي أنَّ العنصر لا يمكن أن يغيّر مكانه)، فلن يكون للخاصيةbottom
أيّ تأثير.
عند تحديد قيم للخاصيتين top
و bottom
، وكانت قيمة الخاصية height
غير مُحدِّدة أو كانت auto
أو 100%
، فستُحتَرم القيم المسندة للخاصيتين top
و bottom
؛ وفي حال استعملت قيمة الخاصية height
، فالأولوية للخاصية top
وستُهمَل الخاصية bottom
.
القيمة الابتدائية | auto
|
---|---|
تُطبَّق على | العناصر التي يمكن أن يتغير مكانها (positioned elements). |
قابلة للوراثة | لا |
قابلة للتحريك | نعم |
القيمة المحسوبة | كما حُدِّدَت، لكن مع تحويل الأطوال النسبية إلى مطلقة. |
أمثلة
يبيّن هذا المثال استخدام الكلمة المحجوزة auto
مع عنصر <div>
موضعه مطلق (absolute):
<div class="parent">
<span>parent container</span>
<div class="actual">Actual position</div>
</div>
شيفرة CSS:
.parent {
background-color: #f8f9fa;
padding: 1em;
height: 150px;
}
.actual {
position: absolute;
bottom: auto;
background-color: #310736;
color: white;
box-sizing: border-box;
width: 250px;
height: 2em;
padding: 0.25em;
text-align: center;
opacity: 0.9;
}
مثال عن استخدم قيمة طولية <length>
مع تحديد موضع العنصر إلى نسبي relative
عبر الخاصية position
، لاحظ كيف سيتحرّك العنصر إلى الأعلى نسبةً إلى موضعه الأصلي:
.parent {
background-color: #f8f9fa;
padding: 1em;
height: 150px;
}
.actual {
position: relative;
bottom: 20px;
background-color: #310736;
color: white;
box-sizing: border-box;
width: 250px;
height: 2em;
padding: 0.25em;
text-align: center;
opacity: 0.9;
}
أما هذا المثال، فهو عن استخدام الخاصية bottom
مع عنصر موضعه مطلق:
.parent {
background-color: #f8f9fa;
padding: 1em;
height: 150px;
position: relative;
}
.actual {
position: absolute;
bottom: 0;
background-color: #310736;
color: white;
box-sizing: border-box;
width: 250px;
height: 2em;
padding: 0.25em;
text-align: center;
opacity: 0.9;
}
دعم المتصفحات
الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
الدعم الأساسي | 1.0 | 1.0 | 5 | 6 | 1.0 |
البنية العامة
القيمة <length>
قيمة طولية <length>
سالبة أو موجبة تمثِّل:
- المسافة بين الحافة السفلية للعنصر وبين الحافة السفلية للكتلة الحاوية له (containing block)؛ وذلك إذا كان موضع العنصر مطلقًا (absolutely positioned)
- المسافة التي ستنتقل وفقها الحافة السفلية للعنصر فوق مكانها الطبيعي؛ وذلك إذا كان موضع العنصر نسبيًا (relatively positioned).
القيمة <percentage>
نسبة مئوية من ارتفاع الكتلة الحاوية على العنصر.
القيمة auto
- إذا كان موضع العنصر مطلقًا، فهذه القيمة ستؤدي إلى تحديد موضع العنصر اعتمادًا على قيمة الخاصية
top
. - إذا كان موضع العنصر نسبيًا، فهذه القيمة ستؤدي إلى تحديد موضع العنصر اعتمادًا على قيمة الخاصية
top
انطلاقًا من موضع العنصر الابتدائي، وإذا كانت قيمة الخاصيةtop
تساويauto
أيضًا، فلن يتحرك العنصر رأسيًا.
البنية الرسمية
bottom: <length> | <percentage> | auto;
مصادر ومواصفات
- مسودة CSS Transitions.
- مواصفة CSS Level 2 (Revision 1).