html - respuesta - que hormona libera el miedo

Viendo un div encima de otro

Question

Tengo algo de HTML con dos divs:

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

Quiero que la segunda div #curtain aparezca en la parte superior de la div #backdrop . Los dos divs son del mismo tamaño, sin embargo, no estoy seguro de cómo colocar el segundo div encima del otro.

Answer 1

Aquí está el jsFiddle

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

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

Usa el índice Z para mover el que quieres arriba.

Answer 2

Hay muchas formas de hacerlo, pero esto es bastante simple y evita problemas al interrumpir el posicionamiento del contenido en línea. Es posible que también deba ajustar los márgenes / relleno.

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

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

Answer 3

Para mostrar correctamente un div encima de otro, necesitamos usar la position la propiedad de la siguiente manera:

• Div exterior: position: relative
• Div interno: position: absolute

He encontrado un buen ejemplo here :

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

Espero que esto ayude,
Zag

Answer 4

Utilice la position: absolute; CSS position: absolute; seguido de top: 0px; left 0px; top: 0px; left 0px; En el atributo de style de cada DIV. Reemplaza los valores de píxel con lo que quieras.

Puedes usar z-index: x; para establecer el "orden" vertical (cuál está "arriba"). Reemplace x con un número, los números más altos están encima de los números más bajos.

Aquí es cómo se vería su nuevo código:

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