Tengo el siguiente codigocódigo que dinamicamentediná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 este estaéste está en una esquina, el div
info se cubre por el div
que lo contiene`.
HTML Y RAZOR Código:
<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;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="contenido-plano">
<div id="plano">
<img class="img-sensor" src="http://placehold.it/800x600/eee">
<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="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>
.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;
}