confini CSS che interferiscono con il posizionamento assoluto

Question

[edit: chiarito che box-sizing: border-box non sembra applicabile, dal momento che sto usando il posizionamento assoluto]

Il codice seguente illustra il mio problema. Sto usando il posizionamento assoluto, perché ho trovato questo ancora più complicato con il layout basato sul flusso, ma sono aperto a suggerimenti. Quello che voglio è il confine intorno agli elementi arbitrari, senza i confini che influenzano il posizionamento dei nodi. (I confini possono clip o essere sovrascritti dal contenuto, ma questo non importa.)

In particolare, i confini di un genitore deve essere in grado di sovrapposizione con i confini dei suoi figli, che non è il comportamento predefinito. L'attributo di dimensionamento della casella CSS può essere impostato su border-box per ottenere l'effetto desiderato, ma solo (credo) con elementi in linea. Non ha alcun effetto sugli elementi con posizionamento assoluto (come ho capito cose).

Quindi, il mio approccio è stato quello di utilizzare un margine negativo per compensare le posizioni dei bambini per la larghezza del bordo. Questo sembra infatti annullare l'effetto della presenza del confine, ma sfortunatamente non in un modo coerente con i fattori di scala. A grande scala, le cose sembrano ok. Allo zoom predefinito del browser su Chrome, il posizionamento dell'elemento si spegne un po '(appaiono troppo alti); se vado più piccolo, la posizione dell'elemento si spegne nell'altra direzione.

Ma se rimuovo completamente i bordi, il layout sembra in scala.

Quindi la mia domanda è: esiste un modo affidabile (scalabile) per avere confini con elementi HTML senza alcun impatto sul posizionamento degli elementi?

[Nell'esempio, ho usato colori diversi per alcuni bordi. Mi piacerebbe vedere solo nero, ma in alcuni zoom posso vedere i bordi rossi e verdi, mostrando che la posizione del elemento viene influenzata dalla presenza del confine.]

grazie Roly .bordered { posizione : assoluto; altezza: 18px; Bordo : 2 px solido; margine: -2px; }

<span class="bordered" style="width: 55px; left: 30px;"> 
    <span class="bordered" style="width: 8px; left: 0;"> 
    (
    </span> 
    <span class="bordered" style="border-color: green; width: 47px; left: 8px;"> 
    <span class="bordered" style="border-color: red; width: 39px; left: 0;"> 
     <span class="bordered" style="width: 8px; left: 0;"> 
     5 
     </span> 
     <span class="bordered" style="width: 31px; left: 8px;"> 
     <span class="bordered" style="width: 23px; left: 8px;"> 
      Nil 
     </span> 
     </span> 
    </span> 
    <span class="bordered" style="width: 8px; left: 39px;"> 
    ) 
    </span> 
    </span> 
</span> 

Answer 1

Prova CSS2 outline proprietà:

.bordered { 
    outline:2px solid blue; 
} 

Outline non influisce sulla posizione dell'elemento.

È inoltre possibile utilizzare CSS3 outline-offset come si vede qui: http://www.css3.info/preview/outline/

Answer 2

Ho anche scoperto che usando un bordo di larghezza pari a zero (in modo che non influisce layout), e quindi l'aggiunta di un box-shadow di emulare un confine visibile, sembra funzionare bene.