Подскажите по верстке нескольких зависимых блоков

Извините за банальный совет - не пробовали картинку прилепить бэкграундом к нижнему динамическому блоку? Ее поведение в таком случае будет напоминать то поведение, которое вы описали. Прилепить нужно через свойства left bottom, т.е. что-то типа

div.dynamic { background: url(img.jpg) left bottom no-repeat; }

Конечно, в этому случае верхнему блоку не должен быть присвоен бэкграунд вообще, чтобы картинка "просвечивала" сквозь него.

Еще способ - задать динамическому блоку свойство position:relative, а картинку прилепить к его низу через position:absolute (тег img должен быть внутри тега div динамического блока), как-то так:

div.dynamic { position: relative; }
div.dynamic img { position: absolute; left: 0; bottom: 0; z-index: 255; }

"Большой" z-index нужен, чтобы картинка не заслонялась верхним блоком.

marazmus, спасибо!

Первый вариант не подходит, т.к. фон ячейки ограничивается вертикальной высотой блока, а по умолчанию она меньше картинки (хотя при желании можно наверное отступами и вложенными блоками поиграть), а вот второй вариант вроде бы вполне кроссбраузерно подошел! 🍻

Насчет первого способа (а вдруг все-таки через тег img не подойдет, и нужно будет решать задачу через бэкграунд) - сделать дополнительный div, который будет содержать оба блока, и картинку задать его бэкграундом, и прилепить как нужно, снизу слева. Тогда, как бы ни тянулись вложенные в этот div блоки, картинка все равно будет на месте, т.к. она будет зависеть не от них, а от внешнего блока. Т.е. к примеру, динамический блок "поехал" вниз - ну и пусть едет, т.к. вместе с ним едет и нижний край облегающего блока, а с ним и бэкграунд :)

Т.е. что-то типа:

HTML:

<div id="outer-block">
  <div id="inner-fixed-block">
    <p>blabla</p>
  </div>
  <div id="inner-dynamic-block">
    <p>blublu</p>
  </div>
</div>

CSS:

div#outer-block { background: url(img.jpg) left bottom no-repeat; }

да, но в таком случае inner-dynamic-block будет выше картинки, а мне надо, чтобы картинка именно над ним была (а z-index вроде как не поможет, т.к. блоки вложенные, а не на одном уровне).

<div id='wrapper' style='position:relative;'>
  <div id='topblock' style='width:100%; clear:both; margin:0px; height:скока нада'>
  </div>
  <div id='bottomblock style='width:100%; clear:both; margin:0px;'
  </div>
  <img style='position:absolute; bottom:0px; left:0px;' src='...'/>
</div>

Все, догнал. Тогда да, остается только второй вариант, с img, позиционированным абсолютно. А камрад neolord даже подсказал конкретный код :)