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:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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

<!-- language: lang-html -->

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

<!-- end snippet -->