So platzieren Sie HTML-Elemente über Inline-SVG

Lesezeit: 3 Minuten

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.

  • Versuchen Sie, den Z-Index des SVG auf -1 zu setzen

    – Hoscht

    24. Oktober 2015 um 1:34 Uhr

  • Das funktioniert, danke! Nun … warum funktioniert es? Wenn Sie Ihren Kommentar einfach in eine Antwort werfen, werde ich ihn positiv bewerten, und da ich keine bessere Antwort habe, werde ich ihn in ein paar Tagen akzeptieren. Ich würde jedoch gerne eine Antwort akzeptieren, die es mir sagt warum es verhält sich so, damit ich mein mentales Modell der Situation verbessern kann. Ich bin besonders ratlos, warum es gut für Geschwister funktioniert, sagen wir, p’s.

    – Alan de Smet

    24. Oktober 2015 um 1:39 Uhr


  • Das Problem ist hier nicht das SVG, sondern das p-Tag. Der Z-Index wird nicht auf die Elemente angewendet, da keine Position festgelegt ist. Eine Alternative zum Setzen von -1 auf dem svg, set position: relative auf dem P-Tag. Ich habe nicht bemerkt, dass die Position auf diesem fehlte.

    – Hoscht

    24. Oktober 2015 um 1:45 Uhr


Benutzeravatar von Hoshts
Hoschts

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

  • Verwenden Sie besser die akzeptierte Antwort.

    – Mikkel R. Lund

    25. November um 8:36 Uhr

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
}

  • Danke schön! Die anderen Lösungen haben bei mir auch nicht funktioniert, da ich auch ein Hintergrundbild habe.

    – Michail Ratner

    21. Februar um 9:47 Uhr

  • Du bist ein Lebensretter. Dies war das einzige, was funktionierte. Verwenden z-index:1 auf meinem SVG hat das div aus irgendeinem Grund den unteren Teil des SVG abgeschnitten.

    – Badr B

    22. Juni um 18:41 Uhr

1436890cookie-checkSo platzieren Sie HTML-Elemente über Inline-SVG

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy