Позиционирование блоков относительно изображения - PullRequest
Новая
       21

Позиционирование блоков относительно изображения

2 голосов
/ 16 июля 2011

У меня следующая ситуация:

  • У меня есть контейнер фиксированного размера.
  • Внутри контейнера я отображаю изображение (неизвестного размера), которое больше контейнера. Я хочу, чтобы изображение было максимально большим (но с сохранением соотношения сторон). Я также хочу, чтобы изображение было вертикально и горизонтально центрировано в контейнере (пока все хорошо, я знаю, как это сделать)
  • Теперь я хочу, чтобы над изображением было два наложения (неизвестного размера): одно выровнено по верху, а другое по низу изображения.

Я не могу правильно понять последнюю точку. Если неясно, то, надеюсь, это демо должно помочь: там у меня есть оверлеи, выровненные по верху / низу контейнера . Вместо этого я хочу, чтобы они были выровнены с image . Любая помощь приветствуется!

Ответы [ 2 ]

2 голосов
/ 16 июля 2011

position: relative не работает с ячейками таблицы.

Из спецификации: http://www.w3.org/TR/CSS21/visuren.html#propdef-position

Эффект «позиция: относительная» для группы строк-таблиц,элементы table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell и заголовок таблицы не определены.

Итак, добавьтеобертку div и вместо нее примените position: relative:

http://jsfiddle.net/B9Le8/5/

<div id="container">
    <div> <!-- the wrapper -->
        <img id="img" src="http://lh5.ggpht.com/-J7Q7cUDEFOU/S_bKEoyMSzI/AAAAAAAAGIw/PZJduitsVa0/largeNewGoogleLogoFinalFlat-a.png" />
        <div class="overlay" id="top">Overlay top</div>
        <div class="overlay" id="bottom">Overlay bottom</div>
    </div>
</div>

#container > div {
    position: relative;
}
0 голосов
/ 16 июля 2011

Я думаю, вы должны поместить изображение в <DIV> и установить в нем style="background:url()".Затем в эти DIV поместите DIV s, которые вы хотите позиционировать.Так должно быть проще.

...