HTML : Div on Image

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 向下移动并远离图像。如果您只是将 .dragDiv css 上的代码更改为 -20px 和 -20px，它将覆盖图像。

或者，你可以给“pnlContainer”相对定位，然后绝对定位“dragDiv”和“cropBox”——你不应该需要 z-index——只要定位，div 就会出现在图像上在这种情况下。

无论哪种方式都很好。底线是 - 在这种情况下正确定位它们将使 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>