androide

Pessoal estou com uma pegadinha css que ainda não consegui resolver segue:

Criei 4 divs posicionadas em cima de uma imagem, as duas primeiras formam uma cruz, as 2 seguintes também, os positions top e left estão exatamente iguais para cada div, o objetivo é que o primeira cruz seguirá o mouse com um efeito jQuery, a segunda cruz aparecerá quando o usuário clicar em alguma posição da imagem, ele pegará as cordenadas position do mouse e habilitará as duas divs seguintes porém ficaram estaticas. O problema está no css pois o primeiro grupo de divs aparece exatamente o segundo aparece muito mais embaixo tendo os mesmos valores position das divs anteriores.
1ºdiv

left: -852.5px; top: 94px;

2ºdiv

left: 250px; top: -497px;

[mesmos valores]

3ºdiv

left: -852.5px; top: 94px;

4ºdiv

left: 250px; top: -497px;

Segue exemplo: para visualizar as duas divs que não estão aparecendo, retire o "overflow: hidden;":
Este exemplo está sem javascript para vocês verificarem que o erro está no css e foi testado no firefox podem jogar o código no html e trará o mesmo resultado.

<div style="background: url(img/tabela-puma.jpg) no-repeat scroll 0% 0% transparent; width: 745px; height: 404px; overflow: hidden;" id="movimento">
<div style="z-index: 2; width: 2235px; height: 30px; position: relative; background: none repeat scroll 0% 0% rgb(255, 0, 0); opacity: 0.3; left: -852.5px; top: 94px;" id="reguaH"></div>
<div style="z-index: 1; width: 30px; height: 1212px; position: relative; background: none repeat scroll 0% 0% rgb(0, 0, 0); opacity: 0.3; left: 250px; top: -497px;" id="reguaV"></div>
<div style="display: table; z-index: 3; width: 2235px; height: 30px; position: relative; background: none repeat scroll 0% 0% rgb(255, 0, 0); left: -852.5px; top: 94px;" id="reguaH2"></div>
<div style="display: table; z-index: 4; width: 30px; height: 1212px; position: relative; background: none repeat scroll 0% 0% rgb(0, 0, 0); left: 250px; top: -497px;" id="reguaV2"></div></div>