Что я делаю не так, когда пытась расставить блоки?

Здравствуйте. Прошу у вас помощи. Не знаю к кому обратиться. Посмотрите на код и на результат. Почему происходит такая жесть?

<div id="mono">
            <div id="monoimg">
                <img src="{image-1}" />
            </div>
            <div id="taxa">
                <h1>[xfgiven_ttt]Мой текст в поле [xfvalue_ttt][/xfgiven_ttt]</h1>
            </div>
    </div>

#mono {
width: 200px;
overflow: hidden;
height: 200px;
float:left;
}

#taxa {
    background: #00FFA9;
    width:200px;
    height:200px;
    margin: 10px;
position: absolute;
z-index: -1;
}

#monoimg {
   width:200px;
    height:200px;
    position: relative;
}

$(document).ready(function(){
$('#monoimg').click(function(){
$(this).css('position','relative');
 $(this).animate({'top':'-200px'},200);
    });
});

Задумка такая. Есть много блоков (новостей). Если нажать на блок, то картинка уйдёт наверх, и на этом месте можно будет прочитать текст и нажать "читать далее". То у меня текст под картинку залезать не хочет, то не хочет подниматься, то всё это криво происходит. Подскажите пожалуйста, что нужно изменить в коде?