So platzieren Sie HTML-Elemente über Inline-SVG

Ich kann z-index verwenden, um verschiedene HTML-Elemente in beliebiger Reihenfolge übereinander zu platzieren, außer wenn eines der Elemente in einer Inline-SVG ist. Zum Beispiel angesichts der HTML

<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>

und das passende CSS

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

Unabhängig davon, wie ich die beiden ordne oder den Z-Index anpasse, wird das Inline-SVG über dem Text gerendert. Wie bekomme ich das SVG hinter dem Text?

Das obige Beispiel ist unter verfügbar https://jsfiddle.net/o0n10j78/1/ .

Wenn es relevant ist, generiere ich in meiner aktuellen Anwendung fast die gesamte Dokumentstruktur in Javascript mit Hilfe von jQuery, einschließlich der Inline-SVG und des HTML-Blocks, den ich davor haben möchte.

Die Z-Index-Eigenschaft wird nur auf positionierte Elemente angewendet. Hinzufügen position: relative; auf das Absatz-Tag wird es korrekt anwenden.

Ansehen diese Seite für eine vollständige Referenz der Immobilie.

Nebenbei bemerkt: Wie ich zuerst in einem Kommentar geschrieben habe, funktioniert das Setzen des SVG-Z-Index auf -1, da es die Priorität des Elements unter den Standardwert senkt, den alle Elemente haben. Dies hat den Nachteil, dass das SVG tatsächlich auch hinter dem Div platziert wird. Versuchen Sie, eine Hintergrundfarbe auf das Div anzuwenden, während der SVG-Z-Index auf -1 gesetzt ist.

Bitte fügen Sie ein hinzu z-index:-1 zum SVG.

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

Hinzufügen z-index: -1 wie vorschlagen von Fazil Abdülkhadar hat bei mir nicht funktioniert, weil ich einen Hintergrund habe. Daher wird mein SVG hinter meinem Hintergrund sein.

Wie vorgeschlagen von HoschtsIch lege position: relative; auf die Elemente, die ich will vor meinem absoluten svg.

Für das Beispiel dieses Problems wird es sein:

p {
   position: relative; // add it
   width: 200px;
   /* z-index: 10; */ // change it to z-index: 1;
}
div {
   position: relative; // not sure it is necessary
}
svg {
   position: absolute;
   left: 0;
   top: 0;
   /* z-index: 1; */ // remove it
}