Почему «display: table-cell» не работает, когда «position: absolute» - PullRequest
Новая
       11

Почему «display: table-cell» не работает, когда «position: absolute»

9 голосов
/ 22 октября 2009

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

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

Ответы [ 2 ]

8 голосов
/ 22 октября 2009

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

top: 60px;

до 

bottom: 60px;

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

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

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

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

2 голосов
/ 22 октября 2009

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

...