Как расположить гифку в нужном месте

Задумка была такая: В бакграунде столбца табличного дизайна, висит картинка подсвечника с огарком свечи. Над ним хотел расположить гифку горящего огонька. Но огонек висит слишком высоко над огарком и немного правее. Как его подвести к нужному месту? Пробовал абсолютное позиционирование в CSS, почемуто ничего не получилось. Как можно еще в браузере расположить гифку в нужном месте? Спасибо.

Если я правильно понял, для нижнего рисунка свойство top должно равняться top верхнего рисунка плюс его height, при условии, что они имеют одинаковую ширину и правильно совмещаются изначально.

На скриншоте - ячейка таблицы(<td></td>).Нижний рисунок - ее фон (background). В ячейке расположен верхний рисунок - анимация ("гифка" - колеблющийся язычок пламени). Размеры нижнего и верхнего рисунков разные. По умолчанию браузер располагает верхний рисунок где-то посредине ячейки. А нужно чтобы он (огонек свечи)расположился ниже и немного левее. Как быть?

Добавлено через 50 минут
Извините:blush:, с позиционированием разобрался сам. Спасибо.