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

#html #css #css-position

#HTML #css #css-позиция

Вопрос:

У меня есть следующий 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;
}

Ответ №1:

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

Или вы могли бы задать относительное расположение «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>

1. Круто, что работает. Как всегда, проблема с шириной и высотой родительского div, как вы можете видеть здесь jsfiddle.net/N87CX/5 граница «pnlContainer» не закрывает дочерний div.

2. Я не понимал, что это было частью вашего вопроса. Можете ли вы просто поместить рамку на изображение вместо содержащего div?

Ответ №2:

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