لماذا "عرض: جدول خلايا" مكسورة عند "موقف: المطلقة"

Question

وأنا واجهت مشكلة غريبة. يمكنني استخدام DIV كما حاوية، ووضع الصورة في هذه DIV. أريد هذه الصورة لتكون محاذاة عموديا إلى أسفل. يعمل التعليمة البرمجية التالية.

#banner { 
  width: 700px; 
  height: 90px; 
  top: 60px; 
  left: 178px; 
  overflow: hidden; 
  text-align: center; 
  display: table-cell; 
  vertical-align: bottom; 
  position: relative;
}

<div id="banner">
  <img src="http://www.google.de/intl/de_de/images/logo.gif"/>
</div>

ولكن إذا قمت بتغيير رمز المغلق "الموقف: النسبية" إلى "الموقف: المطلق"، وصورة لا يمكن محاذاة إلى أسفل أي أكثر من ذلك. هل هذا خلل من Firefox3؟ كيف يمكنني حل هذه المشكلة؟

وبلدي الحل الحالي هو:

<div id="banner">
  <table width="100%" height="100%"><tr><td valign="bottom" align="center">
  <img src="http://www.google.de/intl/de_de/images/logo.gif"/>
  </td></tr></table>
</div>

ولكن أنا لا أحب هذا الحل.

Answer 1

والجواب باختصار: تغيير

top: 60px; 

إلى

bottom: 60px;

والإجابة الطويلة:

ووposition: absolute إعلان يأخذ عنصر الخاصة بك من أينما كان ووضعه بالنسبة لعنصر الأعمق التي لم يتم التصريح ثابت. في لم تعد تشارك في محاذاة أي عنصر آخر، وبالتالي فإنه لم يعد بمثابة الجدول الخلية (إعلان له أي تأثير). بالإضافة إلى ذلك، إعلان مثل top: 10px يعني وضعه أن الكثير المسافة من أعلى من تلك التي تحتوي على عنصر.

وإعلان عنصر كما position: relative يجعل إعلان مثل top: 10px تعني نقل 10px عنصر من أعلى من الوضع الحالي ". فمن الممكن لعناصر أعلن بالنسبة لتتداخل مع العناصر الأخرى، على الرغم من أنك يجب أن نتذكر أن الموقف الأصلي لا يزال يحدد الترتيب من العناصر الأخرى.

وآمل أن يكون هذا الجواب على سؤالك.

Answer 2

ويمكنك أيضا محاولة وضع الموقف: النسبية. الحاويات، الأمر الذي يجعل من شعار (موقف #banner: النسبي، وIMG الموقف: المطلقة) ثم تعيين موضع مطلق أن يكون أسفل: 0، محاذاة إلى أسفل الحاوية. إذا كانت صفحة كاملة، مجرد مجموعة العرض والارتفاع للحاوية إلى 100٪، وإزالة الحشو الزائد / الهامش على الجسم أو على شعبة.