Почему “дисплей:таблица-ячейка ”разрывается, когда“позиция:абсолютный”

StackOverflow https://stackoverflow.com/questions/1608983

  •  05-07-2019
  •  | 
  •  

Вопрос

Я столкнулся со странной проблемой.Я использую 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>

Но если я изменю css-код "position:относительноеположение" к":абсолют", изображение больше не может быть выровнено по низу.Это ошибка 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>

Но мне не нравится это решение.

Это было полезно?

Решение

Краткий ответ:Изменение

top: 60px;

Для

bottom: 60px;

Длинный ответ:

Декларация position: absolute извлекает ваш элемент, где бы он ни находился, и помещает его относительно самого внутреннего элемента, который не объявлен статическим.In больше не участвует в выравнивании любого другого элемента, следовательно, он больше не служит ячейкой таблицы (объявление не имеет никакого эффекта).Кроме того, такие заявления, как top: 10px означает разместить его на таком большом расстоянии от верхней части этого содержащего элемента.

Объявление элемента как position: relative делает заявление, такое как top: 10px означает "переместить элемент на 10 пикселей сверху из текущего положения".Элементы, объявленные относительно друг друга, могут перекрываться с другими элементами, хотя вы должны помнить, что исходное положение по-прежнему определяет расположение других элементов.

Я надеюсь, что это ответ на ваш вопрос.

Другие советы

Вы также можете попробовать установить позицию: относительная; Контейнер, который создает баннер (позиция #banner: относительная; и позиция img: абсолютная), затем устанавливает абсолютную позицию в нижнюю часть: 0, выравнивая ее по нижней части контейнера. Если это целая страница, просто установите ширину и высоту контейнера на 100% и удалите дополнительные отступы / поля на теле или на div.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top