Tengo el siguiente codigo que dinamicamente 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 este esta en una esquina el div
info se cubre por el div
que lo contiene`.
HTML Y RAZOR
<div id="contenido-plano">
<div id="plano">
<img class="img-sensor" src="unaimagen.jpgg">
<div style="top:163px; left:132px;" 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="/Content/IMG/sensor_verde.png" 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="/Content/IMG/sensor_verde.png" 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="/Content/IMG/sensor_verde.png" width="20">
</div>
</div>
</div>
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;
}