Отображение одного div поверх другого

Ответ 1

Используйте CSS position: absolute;, а затем top: 0px; left 0px; в атрибуте style каждого DIV. Замените значения пикселей тем, что вы хотите.

Вы можете использовать z-index: x; для установки вертикального "порядка" (который находится "сверху" ). Замените x на число, более высокие числа вернутся к более низким номерам.

Вот как выглядит ваш новый код:

<div>
  <div id="backdrop" style="z-index: 1; position: absolute; top: 0px; left: 0px;"><img alt="" src='/backdrop.png' /></div>
  <div id="curtain" style="z-index: 2; position: absolute; top: 0px; left: 0px; background-image:url(/curtain.png);background-position:100px 200px; height:250px; width:500px;">&nbsp;</div>
</div>

Ответ 2

Есть много способов сделать это, но это довольно просто и позволяет избежать проблем с нарушением позиционирования встроенного содержимого. Возможно, вам также придется скорректировать поля/отступы.

#backdrop, #curtain {
  height: 100px;
  width: 200px;
}

#curtain {
  position: relative;
  top: -100px;
}

Ответ 3

Чтобы правильно отобразить один div поверх другого, нам нужно использовать свойство position следующим образом:

• Внешний div: position: relative
• Внутренний div: position: absolute

Я нашел хороший пример здесь:

.dvContainer {
  position: relative;
  display: inline-block;
  width: 300px;
  height: 200px;
  background-color: #ccc;
}

.dvInsideTL {
  position: absolute;
  left: 0;
  top: 0;
  width: 150px;
  height: 100px;
  background-color: #ff751a;
  opacity: 0.5;
}

<div class="dvContainer">
  <table style="width:100%;height:100%;">
    <tr>
      <td style="width:50%;text-align:center">Top Left</td>
      <td style="width:50%;text-align:center">Top Right</td>
    </tr>
    <tr>
      <td style="width:50%;text-align:center">Bottom Left</td>
      <td style="width:50%;text-align:center">Bottom Right</td>
    </tr>
  </table>
  <div class="dvInsideTL">
  </div>
</div>

Ответ 4

Вот jsFiddle

#backdrop{
    border: 2px solid red;
    width: 400px;
    height: 200px;
    position: absolute;
}

#curtain {
    border: 1px solid blue;
    width: 400px;
    height: 200px;
    position: absolute;
}

Используйте Z-индекс, чтобы переместить тот, который вы хотите на вершине.

Ответ 5

Установите стиль для родительского div и дочернего div'а следующим образом. Это сработало для моего случая, надеюсь, это поможет и вам..

<div id="parentDiv">
  <div id="backdrop"><img alt="" src='/backdrop.png' /></div>
  <div id="curtain" style="background-image:url(/curtain.png);background-position:100px 200px; height:250px; width:500px;">&nbsp;</div>
</div>

в вашем JS:

document.getElementById('parentDiv').style.position = 'relative';
document.getElementById('backdrop').style.position = 'absolute';
document.getElementById('curtain').style.position = 'absolute';
document.getElementById('curtain').style.zIndex= '2';//this number has to be greater than the zIndex of 'backdrop' if you are setting any

или в вашем CSS:

#parentDiv{
  position: relative;
}
#backdrop{
  position: absolute;
}
#curtain{
  position: absolute;
  z-index:2;<!-- this number has to be greater than the z-index of 'backdrop' if you are setting any -->
}

Проверьте рабочий пример :

#parentDiv{
  background: yellow;
  height: 500px;
  width: 500px;
  position: relative;
}
#backdrop{
  background: red;
  height: 300px;
  width: 300px;
  position: absolute;
}
#curtain{
  background: green;
  height: 100px;
  width: 100px;
  position: absolute;
  z-index: 2;
  margin: 100px 0px 150px 100px;
}

<div id="parentDiv"><h2>
  THIS IS PARENT DIV
  </h2>
  <div id="backdrop"><h4>
  THIS IS BACKDROP DIV
  </h4></div>
  <div id="curtain"><h6>
  THIS IS CURTAIN DIV
  </h6></div>
</div>