Cách đặt các phần tử HTML qua nội tuyến SVG

Question

Tôi có thể sử dụng chỉ mục z để đặt các phần tử HTML khác nhau theo thứ tự tôi muốn, ngoại trừ khi một trong các phần tử trong SVG nội dòng. Ví dụ, với 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> 

và CSS hợp

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

dù thế nào tôi đặt hai hoặc điều chỉnh z-index, các SVG inline làm cho trên đầu trang của văn bản. Làm thế nào tôi có thể nhận được SVG đằng sau văn bản?

Ví dụ ở trên có sẵn tại https://jsfiddle.net/o0n10j78/1/.

Nếu nó có liên quan, trong ứng dụng thực tế của tôi, tôi tạo gần như tất cả cấu trúc tài liệu trong Javascript với sự hỗ trợ của jQuery, bao gồm SVG nội tuyến và khối HTML tôi muốn có trước nó.

Answer 1

Thuộc tính z-index chỉ được áp dụng trên các phần tử được định vị. Thêm position: relative; vào thẻ đoạn sẽ áp dụng chính xác nó.

Nhìn vào số this page để có tham chiếu đầy đủ về thuộc tính.

Lưu ý: Như tôi đã viết lần đầu tiên trong nhận xét, hãy đặt svg z-index thành -1 hoạt động vì nó làm giảm mức độ ưu tiên của phần tử bên dưới mặc định mà tất cả các phần tử đều có. Điều này đi kèm với nhược điểm mà các svg thực sự được đặt phía sau div là tốt. Thử áp dụng màu nền cho div trong khi có chỉ số svg z-index thành -1.

Answer 2

Vui lòng thêm z-index:-1 vào svg.

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