Холст и Z-индекс

Question

У меня есть следующий HTML-код:

<div class="reflect" style="width: 348px; height: 327px; overflow-x: hidden; overflow-y: hidden; ">
    <img id="image" class="reflected" 
         src="http://domain.com/1-1.png" 
         style="display: block; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial;">
    <canvas width="348" height="54" 
        style="display: block; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: -50px;"></canvas>
</div>

Я хочу, чтобы элемент холста появлялся под IMG. Прямо сейчас холст находится сверху изображения, 50px часть его сверху (см. Margin-top: 50px). Я попытался установить z-index для каждого элемента, но безуспешно. Нужна ваша помощь в решении этой проблемы.

Answer 1

Вам нужно взглянуть на absolute расположение элементов и z-index

. Если вы абсолютно точно позиционируете img, установите z-index, а затем удалите margin-top изэлемент canvas, это должно сработать.