Z-index и всплывающие кнопки на проекте внутри относительного контейнера

Question

Я внедряю SVG-edit на свой сайт. Он предназначен для полноэкранного режима, но я сократил его, чтобы уместить на своей странице, и изменил некоторые CSS, чтобы сделать эту работу, что наиболее важно, поместив ее внутри этого div.

#master_editor_container {
    position: relative;
    height: 600px;
    border: 1px solid #ccc;
    background: #ABCDEF;
}

У меня есть кнопка, которая при нажатии должна вызывать отображение всплывающих кнопок: ни одна из них не удаляется и появляется на экране рядом с кнопкой, которая была нажата для их активации. Элементы находятся в HTML-документе. Я использовал элемент inspect после их активации, чтобы убедиться, что нет отображения: ничего не применено. Я применил самый высокий z-элемент к выпадающим кнопкам и их контейнеру. Я применил всю позицию относительную, абсолютную и фиксированную в нескольких комбинациях к кнопке и ее контейнерам. Я даже использовал непрозрачность: 0,9, чтобы попытаться нажать всплывающие кнопки вверх. Когда я удаляю "положение: относительное", всплывающие кнопки видны, но, конечно, svg-edit переполняет окно, в котором я пытаюсь его удержать.

Вот все непосредственно релевантные CSS, однако есть несколько движущихся частей. Для полного HTML, смотрите этот pastebin. Для полного CSS, смотрите этот pastebin. Чтобы увидеть пример того, как это должно выглядеть, посмотрите оригинал в последней стабильной версии

Это div, содержащий кнопку для активации выпадающего меню

#tools_left {
    position: absolute;
    border-right: none;
    width: 32px;
    top: 40px;
    left: 1px;
    margin-top: -2px;
    padding-left: 2px;
    background: #D0D0D0; /* Needed so flyout icons don't appear on the left */
    z-index: 4;
}

Это CSS применяется непосредственно к контейнеру всплывающих кнопок

.tools_flyout {
    position: absolute;
    display: none;
    cursor: pointer;
    width: 400px;
    z-index: 1;
}

Это CSS, применяемый непосредственно к самим всплывающим кнопкам

.tools_flyout .tool_button {
    float: left;
    background-color: #E8E8E8;
    border-left: 1px solid #FFFFFF;
    border-top: 1px solid #FFFFFF;
    border-right: 1px solid #808080;
    border-bottom: 1px solid #808080;
    height: 28px;
    width: 28px;
}

Согласно комментариям, это необходимо для правильного определения размера выпусков

.tools_flyout .tool_button,
.tools_flyout .tool_flyout {
    padding: 2px;
    width: 24px;
    height: 24px;
    margin: 0;
    border-radius: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    z-index: 9999;
}

Учитывая то, что я пытаюсь достичь и что я пытался, что может быть причиной того, что эти кнопки не отображаются?

Другой приемлемый ответ - предложить способ сохранить проект svg-edit внутри div без использования контейнера с "position: родственником".