Добрый день. Подскажите, как правильно разверстать такую вещь. Есть блок (ну или баннер, как не назови) где расположена инфа о товаре. Квадратная такая картинка, вытянутая по высоте. Нужно внизу её расположить кнопку купить. Но только так, чтобы она была по центру и немного (наполовину) выезжала за блок. Я просто без картинок написал HTML, но т.к. плохо знаю верстку боюсь что это не лучший вариант. Посмотрите пожалуйста:


Кнопка еще на OnHover будет менять фоновую картинку, как и сам баннер. При подведении мышки к баннеру у него фон меняется, при подведении к кнопке - у неё меняется свой фон. 

Я немного не понял почему когда я указывал Position:absolute отсчет шел не от родителя, ведь должен от родительского дива идти?

absolute - считается от документа, но, если, у родителя  position:relative а у дочки postion:absolute - тогда отсчет ведется от родителя.

Хм, ну вот вариант который я выше привел - нормальный? Я прочел что Relative - от того места где находится элемент. Т.е. див в диве, и получается что  отсчет идет в данном случае от внешнего дива от начала и все нормально.  Или криво?