html – Div that is placed on top of the div that contains it?

Question:

I have the following code that dynamically puts draggable images on top of another image. Hovering over the sensor div displays the info, but when it is in a corner, the info div is covered by the containing div .

Code:

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

Answer:

The pop-up is no longer visible because it exits the container that has an overflow:hidden (and everything that exceeds the container will be hidden by it). The solution would be to remove the overflow: hidden from #plano so that when an element leaves the container, the part that remains outside is still shown:

.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 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>
Scroll to Top