Buongiorno a tutti ho uno schema costituito da molti elementi (div) posizionati tramite il position absolute es:
.block1 {
height:90px;
width:60px;
position: absolute;
top: 45px;
left: 50px;
border: 2px solid #000;
overflow:hidden;
}
mi é stato chiesto di fare in modo che quando un elemento é selezionato cambi il colore e la dimensione del bordo:
.selected {
border: 4px solid #19BAE0;
}
il problema é che aumentando le dimensioni del bordo aumentano anche le dimensioni complessive dell'elemento e rimanendo fisse le coordinate top: 45px; left: 50px; finisce con il risultare di 4 px spostato verso il basso e verso destra rispetto agli altri elementi con cui é allineato.
Se si trattasse di un singolo elemento da gestire inserirei le nuove indicazioni top: 43px; left: 47px; nella classe select e avrei risolto.
Il problema é che la classe select la devo poter utilizzare su tutti gli elementi dello schema che sono tanti.
Si può utilizzare la funzione calc(); o un'altra funzione per indicare nella classe .selected di riposizionare l'elemento partendo dalla posizione precedente - 2px?
Ho cercato degli esempi ma non sono riuscita a trovarli.
Mi sapete dare delle indicazioni in merito per favore?
Grazie mille per l'attenzione.
Rispondi quotando
