поместите SVG поверх html-элементов

Я использую SVG для некоторых диаграмм. Но у меня проблема с всплывающим окном svg. Как вы можете видеть на картинке, html div (зеленая полоса) перекрывает черное всплывающее окно. Есть ли способ разместить svg поверх html-элементов (в моем случае поверх зеленой полосы)?

в ie9 та же страница в порядке.

введите здесь описание изображения

введите здесь описание изображения


svg html
person Neir0    schedule 07.07.2011    source источник
comment
Это не отвечает на вопрос, но стоит отметить. С помощью современных методов css, таких как закругленные углы, градиенты и шрифты значков, вы можете воспроизвести (второй) рисунок выше только в (довольно семантическом) html.   -  person Adam Tolley    schedule 25.06.2014

Ответы (2)


arrow_upward
6
arrow_downward

Безусловно, можно разместить SVG поверх элементов HTML (см. этот пример).

Боюсь, я не вижу ваше изображение из-за брандмауэра :(

person El Ronnoco    schedule 07.07.2011
comment
стоит отметить, что нужно использовать только класс floatTL из указанной скрипки/примера в div, содержащем элемент svg - person Jordan; 28.11.2014

arrow_upward
9
arrow_downward

Проблема здесь не только в SVG. Это связано с позиционированием элементов. Любые позиционированные элементы (позиция:абсолютная, позиция:относительная) отображаются перед любыми непозиционированными элементами.

.box{ width: 200px; height: 200px; }

.blue{
  background-color: blue;
  position: absolute;
  
}
.red{
  background-color: red;
  //position: relative; /*see what happens when you remove this*/
}
<div class="box blue">
</div>

<div class="box red">
</div>

person IanS    schedule 18.05.2016
comment
Я была такая же проблема. В SVG не было задано никакой позиции, но у фона была позиция: абсолютная. Настройки SVG для position: absolute сделали свое дело. Спасибо. Я думал, что это должно быть что-то с элементом SVG, но это базовая вещь для позиционирования :) - person drinovc; 22.06.2018