div to be placed on top of the div that contains it?

Question

div to be placed on top of the div that contains it?

Navigation

#1 by (2 votes)

5

I have the following code that dynamically puts some draggable images on top of another image. When you put the mouse on the div sensor, the info appears, but when it is in a corner, the div info is covered by the div that contains it.

Code:

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

html5 html css3 css

asked by Alcides Salazar 20.03.2018 в 00:34

source

1 answer

Neural network with backward propagation returns the same outputs for large vectors Put value to an input text when you select a radio input

score 2 · Accepted Answer

The pop-up stops seeing because it leaves the container that has a overflow:hidden (and everything that exceeds the container will hide for it). The solution would be to remove the overflow: hidden to #plano so that when an element leaves the container it continues showing the part that is left out:

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