HTML: Div на изображении

Question

У меня есть следующий HTML.Как я могу получить это так, чтобы dragDiv показывалось сверху изображения?

<div id="pnlContainer" class="container">
    <img id="cropbox" src='1.jpg' />
    <div class="dragDiv" id="dragDiv">
    </div>
</div>

.dragDiv {
    width:400px;
    background-color:transparent;
    border:2px solid #CCCCCC;
    position:relative;
    left:20px;
    top:20px;
    padding:0px;
    margin:0px;
    height:50px;
}

Answer 1

В настоящее время вы фактически перемещаете dragDiv вниз и в сторону от изображения. Если вы просто измените свой код на -20px и -20px на .dragDiv css, он будет поверх изображения.

Или вы можете задать относительное позиционирование pnlContainer, а затем абсолютно позиционировать и dragDiv, и cropBox - вам не нужен z-index - просто позиционируя, div будет появляться над изображением в этом случае.

В любом случае это нормально. Суть в том, что правильное их расположение в этом случае позволит получить изображение над изображением.

<style type="text/css">
    #pnlContainer {
        position: relative;
        }

    #dragDiv {
        position: absolute;
        top: 0px;
        left: 0px;
        width:400px;
        background-color: transparent;
        border:2px solid #CCCCCC;
        position:relative;
        left:20px;
        top:20px;
        padding:0px;
        margin:0px;
        height:50px;
        }
    #cropbox {
        position: absolute;
        top: 0px;
        left: 0px;
        }
</style>

Answer 2

Вы можете убедиться, что один элемент отображается над другим, используя свойство CSS Z-index :