Skip to main content
2 de 4
se añadieron 1320 caracteres en el cuerpo

Div que se ponga encima del div que lo contiene?

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;
}