поместив полупрозрачный div на график старших графиков

Question

поместив полупрозрачный div на график старших графиков

0

можно ли поместить div над сгенерированным графиком высоких диаграмм? Как и в, div с прозрачным фоном, который будет иметь текст в нем для чисто эстетических целей.

Возможность выбора диаграммы не важна - просто увидеть ее.

corvid 21 март 2014, в 22:09

Источник

1

Я не вижу в вашем коде ничего, что указывало бы на то, что это невозможно
Mathias 21 март 2014, в 20:44
1

Было бы здорово, если бы вы предоставили пример кода. Но ответ - да, одним из способов будет относительно позиционировать контейнер графика и иметь абсолютно позиционированный дочерний элемент div в контейнере с правильным z-индексом и желаемыми свойствами.
Arbel 21 март 2014, в 20:45

Теги:

javascript

jquery

highcharts

2 ответа

Ещё вопросы

Я не вижу в вашем коде ничего, что указывало бы на то, что это невозможно
Было бы здорово, если бы вы предоставили пример кода. Но ответ - да, одним из способов будет относительно позиционировать контейнер графика и иметь абсолютно позиционированный дочерний элемент div в контейнере с правильным z-индексом и желаемыми свойствами.

EnigmaRM · Answer 1 · 2014-03-21T19-49-00.000Z

Выполнение того, что вы хотите, можно сделать только в CSS.

Как уже упоминалось в комментарии, вы хотите иметь relative контейнер, а затем absolute положение элементов внутри него.

HTML

<div class="container">
    <canvas id="myCanvas"></canvas>
    <div class="overlayed"></div>
</div>

CSS

.container {
    width: 150px;
    height: 150px;
    position: relative;
}
div.overlayed, canvas {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

Я просто использовал образец холста, чтобы дать представление о том, где будет ваша диаграмма.

Здесь JSFiddle

Paweł Fus · Answer 2 · 2014-03-24T09-46-00.000Z

Добавьте div, расположенный абсолютно с более высоким z-индексом, чем диаграмма Highcharts. См.: http://jsfiddle.net/Ww5Tg/9/

<div class="over"></div>
<div id="container" style="height: 300px; width: 400px"></div>

И CSS:

.over {
    width: 400px;
    height: 300px;
    position: absolute;
    z-index: 100;
    border: 1px solid black;
    background-color: black;
    opacity: 0.2;    
}