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>
<>
) y que sería de gran ayuda para poder reproducir el problema y asistirte a solucionarlo.