Perché il grande margine negativo a destra rende l'elemento assoluto no a capo?

Question

Aggiornamento:

Il valore di posizione cambierà la larghezza.

Il JSFiddle: http://jsfiddle.net/caicai/mbtb5m7p/2/

---

Perché la larghezza del div .a2 uguale alla larghezza del suo genitore, mentre il testo nel div .a1 non sarà avvolgere?

Il JSFiddle: http://jsfiddle.net/caicai/mbtb5m7p/

.r { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 22px; 
 
    background: blue; 
 
} 
 
.a1 { 
 
    position: absolute; 
 
    top: 30px; 
 
    margin-right: -9999px; 
 
    background: green; 
 
} 
 
.a2 { 
 
    position: absolute; 
 
    top: 60px; 
 
    background: orange; 
 
}

<div class="r"> 
 
    <div class="a1"> 
 
     Why does this line no wrap. 
 
    </div> 
 
    <div class="a2"> 
 
     Why does this line wrap. 
 
    </div> 
 
</div>

Answer 1

Il div.r ha una larghezza di 100px ed è posizionata in relazione.

I bambini .a1 e .a2 sono posizionati in modo assoluto. Il relativo sul loro genitore (relativamente posizionato).

Senza un margine negativo, i bambini avranno una larghezza massima pari alla dimensione dei genitori.

Tuttavia, aggiungendo un margine negativo, si consente ai bambini di "fluttuare" sui bordi dei propri genitori.

Answer 2

Non è che il contenuto di .a1 non sia più disponibile, è che il contenuto di .a1 non ha bisogno di essere completato perché lo spazio interno disponibile è stato reso sufficientemente ampio per contenere la stringa al suo interno dal margine negativo.

Quindi il tuo div.a1 sarà essenzialmente la larghezza di .r + il valore del margine negativo, che sta trascinando l'estremità destra e aumentando la dimensione del div.

che è praticamente come funziona il box model, il check-out here o here

Answer 3

Il margine è qualcosa che dipende da esso dell'elemento genitore (classe/id) qui Classe R per le classi A1 e A2.

1) Ora è disponibile la larghezza: 100 px per la classe padre (Classe .r), quindi tutte le classi figlio (classe a1 & a2) ereditano la stessa larghezza.

2) Non c'è alcun problema per la classe a2, quella classe è totalmente normale come nessuna proprietà (diversa) unica rispetto alla classe genitore (.r), quindi si comporta correttamente.

3) Ora il caso per la classe .a1, che si comporta anche correttamente finché non trova margin-right: negativeValue;.

Quindi margine di prima comprensione, Margine è lo spazio tra il blocco classe/elemento e il blocco classe/elemento padre. Per esempio margin-left: 5px; quindi quel particolare blocco inizia dopo aver lasciato 5px da sinistra, rispettivamente per il resto tre lati (in alto, in basso, a destra)

Ora i margini negativi, quando viene usato quello che fa, sconfinano il loro limite di blocchi genitore. Questo va oltre i confini dei loro genitori. Quindi qui avete specificato margin-right: -9999px; quindi va oltre il limite della classe .r, tuttavia potrebbe darti un pensiero che -9999px è un valore enorme, dovrebbe gettare il div oltre lo schermo, ma dal testo limitato mostra solo l'area contenuta nel testo.

Inserendo più testo nella classe a1, sicuramente andrà oltre lo schermo, ma il testo dovrebbe essere più che sufficiente.

Graphical ExplanationAggiornato