Come posizionare elementi HTML su inline SVG

Sono in grado di utilizzare z-index per inserire vari elementi HTML l'uno sull'altro in qualsiasi ordine mi piaccia, tranne quando uno degli elementi in un SVG in linea. Ad esempio, dato il codice HTMLCome posizionare elementi HTML su inline SVG

<div> 
    <p>Text before SVG. I'm some boring text. Such incredibly boring text. Who would possibly want to read such boring text?</p> 
    <svg version="1.1" baseProfile="full" width="200" height="200" xmlns="http://www.w3.org/2000/svg"> 
     <circle cx="75" cy="40" r="20" fill="red" /> 
    </svg> 
</div> 
<div> 
    <svg version="1.1" baseProfile="full" width="200" height="200" xmlns="http://www.w3.org/2000/svg"> 
     <circle cx="75" cy="75" r="20" fill="red" /> 
    </svg> 
    <p>SVG before text. I'm some boring text. Such incredibly boring text. Who would possibly want to read such boring text?</p> 
</div>

e il CSS corrispondente

p { 
    width: 200px; 
    z-index:10; 
} 
div { 
    position: relative; 
} 
svg { 
    position: absolute; 
    left: 0; 
    top: 0; 
    z-index: 1; 
}

non importa quanto ordino due o regolare la z-index, lo SVG in linea rende in cima al testo. Come posso ottenere SVG dietro al testo?

L'esempio precedente è disponibile allo https://jsfiddle.net/o0n10j78/1/.

Se è rilevante, nella mia applicazione effettiva sto generando quasi tutta la struttura del documento in Javascript con l'assistenza di jQuery, incluso l'SVG inline e il blocco HTML che desidero avere di fronte.

fonte

2015-10-24 Alan De Smet

Provare a impostare lo z-index dello svg su -1 – Hoshts

Funziona, grazie! Ora ... perché funziona? Se metti il tuo commento in una risposta, lo invierò in precedenza e, in mancanza di una risposta migliore, lo accetterò tra qualche giorno. Tuttavia, mi piacerebbe accettare una risposta che mi dice _why_ si comporta in questo modo così posso migliorare il mio modello mentale della situazione. Sono particolarmente in perdita per il motivo per cui funziona bene per fratello, ad esempio, p. –

Il problema non è in realtà lo svg qui, ma il tag p. Z-index non è applicato sugli elementi in quanto non ha una posizione impostata. Un'alternativa per impostare -1 sulla svg, impostare la posizione: relativa sulla P-tag. Non ho notato che la posizione era mancante su quello. – Hoshts

La proprietà z-index viene applicata solo sugli elementi posizionati. L'aggiunta di position: relative; al tag del paragrafo lo applicherà correttamente.

Vedere this page per un riferimento completo della proprietà.

Nota a margine: come ho scritto per la prima volta in un commento, l'impostazione di svg z-index su -1 funziona in quanto riduce la priorità dell'elemento sotto il valore predefinito di tutti gli elementi. Questo ha lo svantaggio che lo svg venga effettivamente posizionato anche dietro il div. Prova ad applicare un colore di sfondo al div mentre hai lo svg z-index impostato su -1.

fonte

2015-10-24 01:59:45 Hoshts

Si prega di aggiungere un z-index:-1 alla svg.

svg { 
    position: absolute; 
    left: 0; 
    top: 0; 
    z-index: -1; 
}

fonte

2015-10-24 02:12:36

Come posizionare elementi HTML su inline SVG

risposta

Problemi correlati