Position Overlay

[Fronte]

Buonasera , sto provando a far funzionare un overlay su un elenco di foto .
L 'elenco si svilluppa in verticale dopo una query my sql ,con una while php ,.

Ho caricato 2 css
1 per ovelray e 1 per il box
overlay :

.overlay{
    background:#000;
    position:relative;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    z-index:100;
    cursor:pointer;
/*Trasperenza cross browser*/
opacity: .7; filter: alpha(opacity=70); 
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";    
    
} 

box overlay

#box{ width:600px; height:400px; 
background-color:#FFF; display:none;
 z-index:+300; position:relative; left:30%; 
  -moz-border-radius: 15px;  -webkit-border-radius: 15px;
border-radius: 15px;} 

Come devo settare la position del box affinchè si apra davanti alla foto ,
evitando che l 'overlay si apra o in cima alla pagina o alla fine della while ?

Grazie ?