6

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>

6
  • 4
    Hola Alcides Salazar, por favor no coloques el código que genera la página, comparte el código ya generado para que podamos ver el problema. Lee sobre cómo crear un ejemplo mínimo verificable y completa el recorrido de bienvenida para más información (y para ganar una medalla más).
    – Alvaro Montoro
    Commented el 20 mar. 2018 a las 13:20
  • 3
    @AlvaroMontoro Creo que lo que importa es el css y el nombre de los divs, creo. Commented el 20 mar. 2018 a las 13:27
  • 3
    100% de acuerdo con eso. Por eso es por lo que es importante que compartas una versión en la que se pueda ver el problema. El editor provee una herramienta para añadir código ejecutable (HTML, CSS y JS, el icono es algo así <>) y que sería de gran ayuda para poder reproducir el problema y asistirte a solucionarlo.
    – Alvaro Montoro
    Commented el 20 mar. 2018 a las 13:30
  • 1
    @AlvaroMontoro Listo edite, gracias por la recomendacion Commented el 20 mar. 2018 a las 13:51
  • 1
    Ahora que ya se puede ver el código en funcionamiento, ¿cuál de los 3 puntos verdes genera el problema? ¿Cuáles serían los pasos para reproducirlo?
    – Alvaro Montoro
    Commented el 20 mar. 2018 a las 13:58

1 respuesta 1

3

El pop-up deja de verse porque se sale del contenedor que tiene un overflow:hidden (y todo lo que exceda el contenedor se esconderá por ello). La solución sería quitarle el overflow: hidden a #plano para que cuando un elemento se salga del contenedor se siga mostrando la parte que queda fuera:

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

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.