HTML : Div on Image

I have following html. How can I get this so that dragDiv is shown on top of the image?

<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;
}

Currently, you're actually moving the dragDiv down and away from the image. If you just change your code to -20px and -20px on the .dragDiv css, it will be over the image.

Or, you could give the "pnlContainer" relative positioning, then absolutely position both the "dragDiv", and the "cropBox" - you shouldn't need z-index - just by positioning, the div will appear over the image in this case.

Either way is just fine. Bottom line is - positioning them correctly in this case will get the div over the image.

<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>

You could make sure one element appears above the other using the Z-index CSS property: