Как убрать сдвиг?

Question

[Евгений Иванов]

Задача вроде простая, но почему то у меня не получилось это сделать так, как мне нужно.
У меня есть див с графиком и див с меню.
Мне нужно расположить див с меню поверх дива с графиком, с небольшим сдвигом сверху (относительно графика под ним). Ну чтобы меню было над графиком.

Див с графиком заполняется скриптом т.е. писать внутрь него бесполезно.
Дивов с графиком может быть несколько на странице, их высота неизвестна, их ширина всегда 100% и расположены они один под другим.

https://jsfiddle.net/js_user_/erk241Lc/10/

<!-- Меню для графика 1 -->
<div class="GRAPH_favorites"></div>
<!-- График 1 -->
<div id="GRAPH1_container">Что сюда не пиши - всё сотрется.</div>

<!-- Меню для графика 2 -->
<div class="GRAPH_favorites"></div>
<!-- График 2 -->
<div id="GRAPH1_container">Что сюда не пиши - всё сотрется.</div>

#GRAPH1_container
{
display:inline-block;
  width: 100%;
  height: 200px;  /* Неизвестна, но пусть скрипт задал такую высоту, например.*/
  border: 1px solid black;
  }


.GRAPH_favorites
{
z-index:3;
position: relative !important;
display:inline-block;
width:80vw;
top:70px;
height:2rem;
border: 1px solid navy;
 background: yellow;  
}

Проблема в том, что у меня появляется сдвиг сверху. Графики почему то сдвигаются вроде (на расстояние сдвига меню и его высоту).
Как убрать этот сдвиг?

Answer 1

[Мария Коробкоголовых]

Я думаю, имеет смысл обернуть график с меню в блок:

https://jsfiddle.net/rikazavr/o3hkzdrp/1

Comments

[Евгений Иванов]

Спасибо. Тоже об этом думал, но не догадался до

.wrapper {
  position: relative; /* Этого свойства*/
}

Просто обернул див графика и меню в обертку, задал у меню position: relative. И ждал сдвига от родителя т.е. обертки. Но не сработало.

В реальном примере пришлось ещё height:100% добавить, т.к. дивы графиков, в обертке, стали меньше.
Странно.

.wrapper {
position: relative;
height:100%;
}

[Мария Коробкоголовых]

relative нужно прописывать родительскому блоку, относительно которого хочешь позиционировать тот или иной элемент (дочерний, то есть лежащий внутри родительского)