HTML：图像上的 Div

发布于 2024-11-04 14:06:20 字数 448 浏览 1 评论 0原文

我有以下 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;
}

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

零時差 2024-11-11 14:06:20

目前，您实际上正在将 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>

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>

回复收藏 0 原文