Skip to main content
4 de 4
cambiar demo para poder reproducir el problema
Alvaro Montoro
  • 49.8k
  • 28
  • 109
  • 190

¿div que se ponga encima del div que lo contiene?

Tengo el siguiente código que dinámicamente pone unas imágenes arrastrables en encima de otra imagen. Al poner encima el ratón en el div sensor aparece el info pero, cuando éste está en una esquina, el div info se cubre por el div que lo contiene`.

Código:

.info {
  opacity: 0;
  position: absolute;
  left: calc(100% + 1em);
  top: 45%;
  font-size: .8em;
  padding: 0.1em 4em;
  border-radius: 2.2em;
  font-family: arial;
  background: #BFBFBF;
  color: white;
  transition: all ease .3s;
  transform: translateX(-57%) translateY(-50%);
}

.sensor:hover .info {
  opacity: 2;
  transform: translateX(-58%) translateY(-158%);
  z-index: 1000;
}

.img-sensor {
  position: absolute;
  height: 600px;
  width: 800px;
  max-height: 600px;
  max-width: 900px;
}

.sensor {
  position: absolute;
  z-index: 1;
}

#plano {
  position: relative;
  height: 600px;
  width: 800px/9;
  max-width: 800px;
  border: 1px ridge;
  border-color: gainsboro;
  overflow: hidden;
  margin: auto;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<p>Algo de texto aquí para ver el problema</p>

<div id="contenido-plano">
  <div id="plano">
    <img class="img-sensor" src="http://placehold.it/800x600/eee">
    <div style="top:10px; left:100px;" class="sensor ui-corner-all ui-state-highlight ui-draggable ui-draggable-handle" data-id="1">
      <div class="info">
        Sensor1
        <br>
        <a title="Editar Sensor" id="editar-sensor" onclick="EditarSensor(1)"><i class="glyphicon glyphicon-edit"></i></a>
        <a title="Eliminar Sensor" id="elimnar-sensor" onclick="EliminarSensor(1)"><i class="glyphicon glyphicon-erase"></i></a>
      </div>
      <img src="http://placehold.it/20/0a0" width="20">
    </div>
    <div style="top:359px; left:252px;" class="sensor ui-corner-all ui-state-highlight ui-draggable ui-draggable-handle" data-id="3">
      <div class="info">
        Sensor2
        <br>
        <a title="Editar Sensor" id="editar-sensor" onclick="EditarSensor(3)"><i class="glyphicon glyphicon-edit"></i></a>
        <a title="Eliminar Sensor" id="elimnar-sensor" onclick="EliminarSensor(3)"><i class="glyphicon glyphicon-erase"></i></a>
      </div>
      <img src="http://placehold.it/20/0a0" width="20">
    </div>
    <div style="top:252px; left:571px;" class="sensor ui-corner-all ui-state-highlight ui-draggable ui-draggable-handle" data-id="4">
      <div class="info">
        Sensor3
        <br>
        <a title="Editar Sensor" id="editar-sensor" onclick="EditarSensor(4)"><i class="glyphicon glyphicon-edit"></i></a>
        <a title="Eliminar Sensor" id="elimnar-sensor" onclick="EliminarSensor(4)"><i class="glyphicon glyphicon-erase"></i></a>
      </div>
      <img src="http://placehold.it/20/0a0" width="20">
    </div>
  </div>
</div>